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中的几个关键概念的理解-原型链的构建
May 12 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
详细分析vue响应式原理
Jun 22 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php 无限级缓存的类的扩展
2009/03/16 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
委托公证书范本
2014/04/03 职场文书
关于青春的演讲稿
2014/05/05 职场文书
普通党员个人整改措施
2014/10/27 职场文书
投标承诺函范文
2015/01/21 职场文书
中秋节随笔
2015/08/15 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python