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 相关文章推荐
JS cookie中文乱码解决方法
Jan 28 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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
Wordpress php 分页代码
2009/10/21 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
微信小程序实现工作时间段选择
2019/02/15 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
pytorch构建多模型实例
2020/01/15 Python
Python新手学习raise用法
2020/06/03 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
浅析Python 序列化与反序列化
2020/08/05 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
工作决心书
2014/03/11 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Java线程的6种状态与生命周期
2022/05/11 Java/Android