博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue中点击按钮回到顶部(滚动效果)
阅读量:4589 次
发布时间:2019-06-09

本文共 1095 字,大约阅读时间需要 3 分钟。

页面滚动到一定位置时,出现回到顶部按钮 代码如下 HTML

  CSS

.footer .gotop {  text-align: center;  position: fixed;  right: 50px;  bottom: 30px;  cursor: pointer;  padding: 10px;  border-radius: 50%;  background: white;  color: #000000;}
JS
export default {  data() {    return {      gotop: false    };  },  mounted() {
  // 此处true需要加上,不加滚动事件可能绑定不成功 window.addEventListener("scroll", this.handleScroll, true); }, methods: { handleScroll(e) { let scrolltop = e.target.scrollTop; scrolltop > 30 ? (this.gotop = true) : (this.gotop = false); }, toTop() { let top = document.documentElement.scrollTop || document.body.scrollTop; // 实现滚动效果 const timeTop = setInterval(() => { document.body.scrollTop = document.documentElement.scrollTop = top -= 50; if (top <= 0) { clearInterval(timeTop); } }, 10); } }}

 谷歌,火狐中测试通过,Edge中无效,原因 scrollTop 值始终为0

 可使用如下方法

 // 滚动到app所在的位置(无滚动效果),如app在顶部,即回到顶部

 document.getElementById("app").scrollIntoView();

 

 

 

 

 

转载于:https://www.cnblogs.com/chendada/p/11238746.html

你可能感兴趣的文章
shell 分支/循环
查看>>
api服务端接口安全
查看>>
python中的time模块
查看>>
MyBatis-Plus的简单使用
查看>>
C++学习笔记-标准库类型-Vector类型
查看>>
Oracle 树操作(select…start with…connect by…prior)
查看>>
python中的operator.itemgetter函数
查看>>
h5新特性--- 多媒体元素
查看>>
jQuery实现发送短信验证码后60秒倒计时
查看>>
【CSS】盒模型+选择器(你选择的要操作的对象)
查看>>
EM算法总结
查看>>
centos7开启防火墙和指定端口
查看>>
Android系统对话框——自己定义关闭
查看>>
词法分析器 /c++实现
查看>>
Visual Studio2012 Lua插件--BabeLua
查看>>
SOA两个接口通常用于实现更:SOAP vs REST
查看>>
采用UltraISO制作U菜Win7安装盘,显现&quot;File not find /BOOT/CDMENU.EZB.ezb&quot;错误
查看>>
AfxMessageBox和MessageBox差别
查看>>
循环队列
查看>>
华为路由器配置
查看>>