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. CentOS安装JDK环境
			
    一:查看当前系统的java环境 [elsearch@localhost data]$ rpm -qa | grep jdk 二:卸载原有的jdk [elsearch@localhost /]$ yum ...
    
			
    2. 
						
  2. 重复代码Duplicated Code---要重构的信号
			
    什么时候需要重构,当你在项目代码里面嗅到这个味道的时候,就要进行重构.   首个介绍的味道是重复代码的味道.   它表现出来的特征是这些:   1.一个类里面,两个函数中,含有相同的代码,类似的代码: ...
    
			
    3. 
						
  3. ASP.NET MVC各个版本区别
			
    ASP.NET MVC 1 view接收用户输入,把命令传到controller controller处理命令,更新model model被更新后,会通知view需要update view更新后向用户 ...
    
			
    4. 
						
  4. Android中TextView设置字体
			
    最近项目中出现把字体设置成宋体,微软雅黑,黑体,楷体等的需求; 度娘发现Android系统默认支持三种字体,分别为:“sans”, “serif”, “monospace",除此之外还可以使 ...
    
			
    5. 
						
  5. spring boot 注解说明
			
    Starters 可以创建自己的Starter,但名字格式不能是 spring-boot-starter-*,而是 *-spring-boot-starter.类似Maven插件的规则.   自动配置 ...
    
			
    6. 
						
  6. hasOwnProperty()方法与in操作符
			
    1.hasOwnProperty() 该方法检测属性存在于实例,还是存在于原型,对于存在于实例中的属性则返回true 2.in 使用该操作符时只要通过对象能够访问到的属性都会返回true
    
			
    7. 
						
  7. Linux 入门记录：一、命令行 Bash 的基本操作
			
    为了以后长期的线上测试和服务器的性能考量,要用 Linux 服务器了.昨晚装了个 CentOS 6.9,今天开始学学 Linux 基础,扫扫盲.ok,小本本记 ing... 一.Shell简介 She ...
    
			
    8. 
						
  8. Yii 1.1.17 四、属性标签、AR类增删改查、使用上传类与扩展第三方类库
			
    一.属性标签与规则设置 当进入网站页面,将会读数据库返回信息到视图上.那么,现在定义模型中的属性在视图标签上的显示, 也就是模型属性到前台标签的映射 // 定义模型属性到前台标签的映射 public  ...
    
			
    9. 
						
  9. python实战===一键刷屏
			
    #当按键q的时候,自动输入 “大家好!”并回车键发送!from pynput import keyboard from pynput.keyboard import Key, Controller k ...
    
			
    10. 
						
  10. c++ ui 库
			
    Dulib 比较流行的direct ui 界面框架 UIStone 据说金山词霸用着,查询资料甚少 DirectUI qq使用了据说,多学习学习吧 基于directUI的dulib不错 c盘没空间,运 ...
    
			
    11.