vue 回到页面顶部
模仿Element-UI 回到页面顶部
BackToTop.vue <template>
<transition :name="transitionName">
<div class="page-component-up"
@click="backToTop"
v-show="visible"
:style="customStyle">
<i class="el-icon-caret-top"></i>
</div>
</transition>
</template> <script>
export default {
name: 'BackToTop',
props: {
transitionName: {
type: String,
default: 'fade'
},
customStyle: {
type: Object
},
visibilityHeight: { // 纵向滑动多远距离出现滚动条
type: Number
},
backPosition: { // 返回顶部时,滚动到哪里(距离顶部的距离)
type: Number,
default: 0
}
},
data() {
return {
visible: false,
interval: null
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
if(this.interval) {
clearInterval(this.interval)
}
},
methods: {
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight
},
backToTop() {
let distanceY = window.pageYOffset
let i = 0
this.interval = setInterval(() => {
let next = Math.floor(this.easeInOutQuad(10 * i, distanceY, -distanceY, 500))
if(next <= this.backPosition) {
window.scrollTo(0, this.backPosition)
clearInterval(this.interval)
} else{
window.scrollTo(0, next)
}
i++
}, 17)
},
/*
缓动公式(Tween算法)
t: 动画已经执行的时间(实际上时执行多少次/帧数)
b: 起始位置
c: 终止位置
d: 从起始位置到终止位置的经过时间(实际上时执行多少次/帧数) http://www.cnblogs.com/mrsunny/archive/2011/06/21/2086080.html
*/
easeInOutQuad(t, b, c, d) {
// 判断当前时间是否总在总时间的一半以内,是的话执行缓入函数,否则的话执行缓出函数
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b
} else {
// 将总长度设置为一半,并且时间从当前开始递减,对图像进行垂直向上平移
return -c / 2 * (--t * (t - 2) - 1) + b
}
}
}
}
</script> <style lang="scss" scoped>
.page-component-up{
position: fixed;
cursor: pointer;
text-align: center;
transition: .3s;
box-shadow: 0 0 6px rgba(0,0,0,.12);
z-index: 99;
i{
color: #409eff;
display: block;
line-height: inherit;
text-align: center;
font-size: 18px;
}
}
</style>
页面引用:
<template>
<div>
<h1>返回顶部</h1>
<div>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
<el-alert title="山桃红花满上头,蜀江春水拍山流。" type="success"></el-alert>
</div>
<el-tooltip placement="top" content="返回顶部">
<back-to-top
transitionName="fade"
:customStyle="myBackToTopStyle"
:visibilityHeight="300"
:backPosition="50">
</back-to-top>
</el-tooltip>
</div>
</template> <script>
import BackToTop from '@/components/BackToTop' export default {
data() {
return {
myBackToTopStyle: {
'right': '100px',
'bottom': '150px',
'width': '40px',
'height': '40px',
'border-radius': '20px',
'line-height': '40px',
'background': '#fff'
}
}
},
components: {
BackToTop
}
}
</script>
展示效果:
demo 地址:https://github.com/frwupeng517/element-admin/blob/master/src/components/BackToTop.vue
vue 回到页面顶部的更多相关文章
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下 写法 [1]锚点 使用锚点链接是一种 ...
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- 今天才知道a标签的href="#"是回到页面顶部
如题,真的是,做了一年多的开发,今天才知道a标签的href="#"是回到顶部.以前一直以为这是个多么了不起的功能. 顺便扩展一下滑动隐藏和显示按钮(从别处拷贝来的代码) $( do ...
- jquery点击回到页面顶部方法
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 点击按钮回到页面顶部或者某个高度时的问题,JQUERY
$('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...
- JS刷新后回到页面顶部
window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scr ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
随机推荐
- bzoj3435 [Wc2014]紫荆花之恋
如果这棵树不变的话,就是一个裸的点分树套平衡树,式子也很好推$di+dj<=ri+rj$,$ri-di>=dj-rj$ 平衡树维护$dj-rj$,然后查$ri-di$的$rank$即可. ...
- 一个Java程序员的2018年展望与2017年总结
回顾2017年,可以说是对我而言有重大转折的一年.我们选择放弃了北京,来到了杭州,开始了新的生活.房子的事情也基本上落实了,虽然其中经历了种种坎坷,但是结局还是美好的,现在在等贷款放贷.中国人嘛,没有 ...
- Helm学习笔记
Helm学习笔记 Helm 是 Kubernetes 生态系统中的一个软件包管理工具.本文将介绍 Helm 中的相关概念和基本工作原理,并通过一个具体的示例学习如何使用 Helm 打包.分发.安装.升 ...
- 基于 ReactJS 开发简单的可视化业务编辑器 01
线上可以看的,跟github上的代码不一样的:https://whensea.com/wfd/ 程序中经常有一些业务需要定制化,我定制化这些业务的方式主要是基于工作流.配置等方式.由于个人水平限制并不 ...
- linux安装nvm node版本管理器 nvm常用命令 部署node服务器环境
1,nvm git地址点击打开链接,安装命令 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh ...
- Winform/WPF中内嵌BeetleX的HTTP服务
在新版本的BeetleX.FastHttpApi加入了对netstandard2.0支持,如果程序基于.NetFramework4.6.1来构建WinForm或WPF桌面程序的情况下可以直接把Beet ...
- [译]PEP 380--子生成器的语法
导语: PEP(Python增强提案)几乎是 Python 社区中最重要的文档,它们提供了公告信息.指导流程.新功能的设计及使用说明等内容.对于学习者来说,PEP 是非常值得一读的第一手材料,学习中遇 ...
- Java进阶篇设计模式之八 ----- 责任链模式和命令模式
前言 在上一篇中我们学习了结构型模式的享元模式和代理模式.本篇则来学习下行为型模式的两个模式, 责任链模式(Chain of Responsibility Pattern)和命令模式(Command ...
- 用markdown + html写一封简历
0. 前言 1. 阶段1 - 确定需要几个模块 2. 阶段2 - 使用纯文字填充简历 3. 阶段3 - 预留空格 4. 阶段4 - 文章垂直方向的调整 5. 阶段5 - 居中对齐 6. 阶段6 - 加 ...
- 第12章 X.509证书库的Fluent API - IdentityModel 中文文档(v1.0.0)
存储X.509证书的常见位置是Windows X.509证书存储区.商店的原始API有点神秘(在.NET Framework和.NET Core之间也略有变化). X509类是一个简化的API从所述存 ...