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. eclipse如何远程debug/断开远程debug
			
    eclipse如何远程debug? 当你的代码已经部署到生产或者测试环境的时候,你如何debug判断线上的问题呢? debug之前必须保证本地代码和远程代码完全一致,否则将不能建立连接 在eclips ...
    
			
    2. 
						
  2. 51Nod 1024 矩阵中不重复的元素 | 技巧 数学
			
    first try: set<LL> sset; int main() { LL m,n,a,b; while(~scanf("%lld%lld%lld%lld",&a ...
    
			
    3. 
						
  3. 51Nod 1003 阶乘后面0的数量 | 思维
			
    题意:n的阶乘后面0的个数,如果直接算出阶乘再数0的数量一定会超时的. 因为10=2*5,所以求出5贡献的次数就行. #include "bits/stdc++.h" using  ...
    
			
    4. 
						
  4. IntelliJ IDEA使用技巧 (类比pycharm)
			
    第1章 课程介绍 1)下载及安装2)界面介绍  ... ①界面中左右最边上的小窗口(旋转了90度的字体)都自带了下标,win下快捷键alt+index切换窗口 ②演示效果:模拟时钟,快捷键如,0到10 ...
    
			
    5. 
						
  5. 【bzoj1593-预定旅馆】线段树维护连续区间
			
    题解: 这题非常经典啊似乎..经典模型要记住啊.. 对于每个节点维护该区间里的最大的连续区间,然后我们就可以logn递归找最前面的一段. 那就维护mx(无限制),lmx(必须从左边开始),rmx(必须 ...
    
			
    6. 
						
  6. 【CodeForces】788E New task
			
    [题意]n个数,每个数有附加属性0或1,初始全为1.m个操作,每个操作可以改变一个数字的属性为0或1.对于每次操作后的序列求有多少子序列满足要求:5个数字,中间3个数相等且属性为1,左右两个数小于等于 ...
    
			
    7. 
						
  7. NodeJS中Buffer模块详解
			
    一,开篇分析 所谓缓冲区Buffer,就是 "临时存贮区" 的意思,是暂时存放输入输出数据的一段内存. JS语言自身只有字符串数据类型,没有二进制数据类型,因此NodeJS提供了一 ...
    
			
    8. 
						
  8. Python 下调用C动态链接库 -- (转)
			
    在linux开发的动态链接库需要被python调用,首先需要生成.so文件. 生成动态链接库的方法网上有很多,主要就是首先根据源文件编译生成.o,然后链接这些.o文件-shared生成.so.需要注意 ...
    
			
    9. 
						
  9. hdu 1166敌兵布阵（线段树）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    M ...
    
			
    10. 
						
  10. Lucene7.2.1系列（一）快速入门
			
    系列文章: Lucene系列(一)快速入门 Lucene系列(二)luke使用及索引文档的基本操作 Lucene系列(三)查询及高亮 Lucene是什么? Lucene在维基百科的定义 Lucene是 ...
    
			
    11.