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 load Page,load css,load js实现代码
Mar 31 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
Vue.js实现的购物车功能详解
Jan 27 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自动获取目录下的模板的代码
2010/08/08 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
javascript动态控制服务器控件实例
2014/09/05 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
javascript学习之json入门
2016/12/22 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
老生常谈js数据类型
2017/08/03 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
js实现蒙版效果
2020/01/11 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python如何为图片添加水印
2016/11/25 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
四年级评语大全
2014/04/21 职场文书
大四毕业生自荐书
2014/07/05 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
务工证明怎么写
2015/06/18 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL