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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
AngularJS实现路由实例
Feb 12 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
javascript add event remove event
2008/04/07 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
python实现基本进制转换的方法
2015/07/11 Python
python实现转圈打印矩阵
2019/03/02 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
opencv+python实现均值滤波
2020/02/19 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
给女儿的表扬信
2014/01/18 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
2015年中个人总结范文
2015/03/10 职场文书
会计求职自荐信
2015/03/26 职场文书
闪闪红星观后感
2015/06/08 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
react中props 的使用及进行限制的方法
2021/04/28 Javascript