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 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
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查看session内容的函数
2008/08/27 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Python骚操作之动态定义函数
2019/03/26 Python
Python3实现定时任务的四种方式
2019/06/03 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
文案策划求职信
2014/03/18 职场文书
小学安全汇报材料
2014/08/14 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年网管工作总结
2014/12/11 职场文书
士兵突击观后感
2015/06/16 职场文书
Mysql Show Profile
2021/04/05 MySQL
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers