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 datetime的那点事
Nov 15 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Vue实现图片与文字混输效果
Dec 04 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编实现程动态图像的创建代码
2008/09/28 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
详解php中的implements 使用
2017/06/13 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
餐饮业的创业计划书范文
2013/12/26 职场文书
产品发布会策划方案
2014/05/12 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
单位租房协议书范本
2014/12/04 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书