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中substr,substring,slice.splice的区别说明
Nov 25 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
JavaScript简介
Feb 15 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
试述DBMS的主要功能
2016/11/13 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers