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. struts2之OGNL用法
			
    浅析OGNL OGNL是Object-GraphNavigation Language的缩写,是一种功能强大的表达式语言 通过它简单一致的表达式语法,可以存取对象的任意属性,调用对象的方法,遍历整个对 ...
    
			
    2. 
						
  2. centos6.8+openvpn实现账户密码连接（通过端口映射的方式）
			
    #搭建openvpn(编译安装) 初始化环境 #update epel mirror yum install wget -y cd /etc/yum.repos.d && rm -rf ...
    
			
    3. 
						
  3. OScached缓存整个页面和缓存局部页面
			
    1.缓存整个页面 在OSCache组件中提供了一个CacheFilter用于实现页面级的缓存.主要用于对web应用中的某些动态页面进行缓存,尤其是那些需要生成PDF格式文件/报表.图片文件等的页面,不 ...
    
			
    4. 
						
  4. 【Foreign】字串变化 [DP]
			
    字串变化 Time Limit: 10 Sec  Memory Limit: 128 MB Description 定义一个(大写字母)字符串集合{S},初始时值包含一个给定的字符串S1,每次从中任意 ...
    
			
    5. 
						
  5. HDP-2.6.1安装
			
    1.首先安装HDP的Ambari仓库文件到本机的/etc/yum.repos.d/ambari.repo路径下
    
			
    6. 
						
  6. linux平台学x86汇编语言学习集合帖
			
    linux平台学x86汇编语言学习集合帖 linux平台学x86汇编(一):https://blog.csdn.net/shallnet/article/details/45543237 linux平 ...
    
			
    7. 
						
  7. MACHINE_START与MACHINE_END【转】
			
    转自:http://blog.csdn.net/cxw3506/article/details/8475965 版权声明:本文为博主原创文章,未经博主允许不得转载. 在移植Linux时,有个结构体需要 ...
    
			
    8. 
						
  8. Linux时间子系统之八：动态时钟框架（CONFIG_NO_HZ、tickless）【转】
			
    转自:http://blog.csdn.net/droidphone/article/details/8112948 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 数据结 ...
    
			
    9. 
						
  9. Lambda 表达式 in java 8
			
    Lambda 表达式 in Java 8 Lambda表达式是java 8 新增的特性 Lambda表达式主要作用:支持将代码块作为方法参数,允许使用更简洁的代码创建函数式接口的实例,是匿名内部类的一 ...
    
			
    10. 
						
  10. popup menu案例,无说明只代码
			
    效果图: 布局文件, 展示列表的容器 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
    
			
    11.