vue.js实现回到顶部动画效果


Posted in Javascript onJuly 31, 2019

最近使用vue.js做了几个页面,其中有一个回到顶部的动画效果记录下。

html如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>回到顶部</title>
 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
 <META HTTP-EQUIV="expires" CONTENT="0">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
 <link rel="stylesheet" href="./backTop.css" type="text/css"/>
 </head>
 <body>
 <div class="page">1</div>
 <div class="page">2</div>
 <div class="page">3</div>
 <div class="page">4</div>
 <div class="page">5</div>
 <div id="back-to-top" class="back-to-top" @click="backToTop" v-show="backTopShow" v-cloak>
 <span>回到</span>
 <span>顶部</span>
 </div>
 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
 <script src="./backTop.js" type="text/javascript"></script>
 </body>
</html>

backTop.css如下:

* {
 margin: 0px;
 padding: 0px;
 border: 0;
}
 
html, body {
 width: 100%;
 height: 100%;
 position: relative;
 background: #F2F2F2;
 overflow-x: hidden;
 overflow-y: auto;
 z-index: 1;
}
 
[v-cloak] {
 display: none;
}
 
.back-to-top {
 position: fixed;
 bottom: 5px;
 right: 20px;
 z-index: 100;
 border-radius: 5px;
 box-shadow: 0px 0px 2px #222;
 padding: 8px 10px;
 cursor: pointer;
}
 
.back-to-top:hover {
 background: #5AC4D1;
}
 
.back-to-top:hover span {
 color: white;
}
 
.back-to-top span {
 display: block;
}
 
.page {
 width: 100%;
 height: 400px;
 line-height: 400px;
 text-align: center;
}
 
.page:nth-child(odd) {
 background: white;
}

backTop.js 如下:

var backTopVue = new Vue({
 el : "#back-to-top",
 data : {
 //是否显示回到顶部
 backTopShow : false,
 // 是否允许操作返回顶部
 backTopAllow : true,
 // 返回顶部所需时间
 backSeconds : 100,
 // 往下滑动多少显示返回顶部(单位:px)
 showPx : 200
 },
 mounted : function() {
 window.addEventListener("scroll", this.backTopShowOperate, true);
 },
 methods : {
 backTopShowOperate : function() {
 if (!this.backTopAllow) return;
 if (document.body.scrollTop > this.showPx) {
 this.backTopShow = true;
 } else {
 this.backTopShow = false;
 }
 },
 backToTop : function() {
 if (!this.backTopAllow) return;
 this.backToTopShow = false;
 this.backTopAllow = false;
 var step = document.body.scrollTop / this.backSeconds;
 var backTopInterval = setInterval(function() {
 if (document.body.scrollTop > 0) {
 document.body.scrollTop -= step;
 } else {
 backTopVue.backTopAllow = true;
 clearInterval(backTopInterval);
 }
 }, 1);
 }
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
js常见表单应用技巧
Jan 09 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
You might like
利用PHP如何写APP接口详解
2016/08/23 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
高中校园广播稿3篇
2014/09/29 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
建议书的格式及范文
2015/09/14 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
MySQL数据库事务的四大特性
2022/04/20 MySQL