1. 回到顶部，使用 scrollIntoView 方法：

　　Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域　

　　该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true

　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果。

<body style="height:2000px;">

    <div id="target"></div>

    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>

    <script>

        test.onclick = function(){

            target.scrollIntoView();

        }

    </script>

</body>

2. vue 中滚动条滚到一定距离后，显示『回到顶部』按钮；

（1）监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop。首先，在 mounted 钩子中给window添加一个滚动滚动监听事件：

mounted () {

  window.addEventListener('scroll', this.scrollToTop)

},

然后在方法中，添加这个 scrollToTop 方法：



scrollToTop() { 
　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
　　console.log(scrollTop) 
}




控制台打印结果：




(2) 监听回到顶部按钮距浏览器顶部的距离，滚动的距离如果大于浏览器高度时，设置 toTop 为true,否则就是false;




scrollToTop(el) {

    let topBtn = document.getElementById('to-top-btn');

    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

    let browserHeight = window.outerHeight;

    if (scrollTop > browserHeight) {

          topBtn.style.display = 'block';

    } else {

          topBtn.style.display = 'none';

    }

}
               




(3) 离开该页面需要移除这个监听的事件，不然会报错;




destroyed () {

    window.removeEventListener('scroll', this.scrollToTop); 
}


												


											
vue中回到顶部的更多相关文章
	

    
								
  1. Vue.之.回到顶部
		
    Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...
    
		
    2. 
						
  2. vue开发 回到顶部操作
		
    第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history',  ...
    
		
    3. 
						
  3. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
		
    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
    
		
    4. 
						
  4. CSS实现回到顶部图片hover后改变效果
		
    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...
    
		
    5. 
						
  5. vue中的回到顶部
		
    <template> <div class="main"> <div class="content">灰色部分是内容部分&l ...
    
		
    6. 
						
  6. vue 中<vue-scroll >滚动条回到顶部
		
    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...
    
		
    7. 
						
  7. vue 回到顶部的小问题
		
    今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
    
		
    8. 
						
  8. vue回到顶部组件
		
    html <template> <a href="javascript:;" class="toTop" @click="backT ...
    
		
    9. 
						
  9. vue路由切换时内容组件的滚动条回到顶部
		
    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() =>  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mysql 索引 和mysql 的引擎
			
    1.索引的特点 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. ...
    
			
    2. 
						
  2. java中各种循环
			
    简单介绍一下java中的一些循环 package test; import org.apache.log4j.Logger; import org.junit.Test; public class F ...
    
			
    3. 
						
  3. Spring Security 过滤器链
			
    Alias Filter Class Namespace Element or Attribute CHANNEL_FILTER ChannelProcessingFilter http/interc ...
    
			
    4. 
						
  4. Linux SSH 无密码登录
			
    1. ssh-keygen -t rsa 2. scp root@ip:/root/.ssh/id_rsa.pub ./id2 3. cat id2 >> authtorized_keys ...
    
			
    5. 
						
  5. 【hdu5217-括号序列】线段树
			
    题意:给一串括号,有2个操作,1.翻转某个括号.2.查询某段区间内化简后第k个括号是在原序列中的位置.1 ≤ N,Q ≤ 200000. 题解: 可以知道,化简后的序列一定是)))((((这种形式的. ...
    
			
    6. 
						
  6. 【NOIP】提高组2015 子串
			
    [题意]求从字符串A中取出k个互不重叠的非空子串顺序拼接形成B的方案数.n<=1000,m<=100,k<=m. [算法]动态规划 [题解]这题主要是将从i-l转移变成从i-1转移, ...
    
			
    7. 
						
  7. 【51NOD-0】1046 A^B Mod C
			
    [算法]快速幂运算 [题解]快速幂的原理是把幂用二进制表示,从最低位a,次低位a2,次次低位(a2)2. #include<cstdio> long long quick_pow(long ...
    
			
    8. 
						
  8. 使用.net core abp framework
			
    abp是一个有用的框架,包含许多功能,可以用来作为脚手架. 直接在官方网站上输入相应的工程名称,选择对应的版本就会下载对应的版本..net core 版本的可以使用后端框架部分来做api,包含了常用框 ...
    
			
    9. 
						
  9. MSSQL数据库 事务隔离级别
			
    数据库事务的隔离级别有4个,由低到高依次为Read uncommitted .Read committed .Repeatable read .Serializable ,这四个级别可以逐个解 脏读  ...
    
			
    10. 
						
  10. jQuery mobile 滑动打开面板
			
    一.首先在<head></head>里面引入jQuery库.jQuery mobile库以及jQuery mobile样式 <link rel="stylesh ...
    
			
    11.