vue 回到顶部效果
2024-05-20 01:16:38
最终效果：
回到顶部按钮 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.pageYOffsetlet i = 0this.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 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;
}.page-component-up 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="返回顶部"><!-- 组件使用 --><BackToTop transitionName="fade":customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="0"></BackToTop></el-tooltip></div>
</template><script>
//组件引入
import BackToTop from './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>配置项：
props: {transitionName: {type: String,default: 'fade'},customStyle: { //按钮样式type: Object},visibilityHeight: { // 纵向滑动多远距离出现滚动条type: Number},backPosition: { // 返回顶部时，滚动到哪里（距离顶部的距离）type: Number,default: 0}vue 回到顶部效果相关推荐
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
- 回到顶部效果之加速置顶
我在半年前接触过相关案例,最近重新看了一下,添加了详尽的注释,希望对初学者能有所帮助. <!doctype html> <html> <head> <meta ...
- router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式
对于互联网发展的今天,IT行业慢慢变成大多数年轻人发展的目标,不仅前景好,薪资也是越来越高的,而web前端是行业中需要的技术,也促进了大多数朋友在学习html5,今天小猿圈讲师给你分享基于iview的 ...
- 基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
- 如何利用原生JS实现回到顶部以及吸顶效果
<style>.box1{width: 1200px;height: 800px;background-color: pink;margin: 0 auto;}.box2{width: 1 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
- 使用scrollTop回到顶部时间
锚链接 使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能. 功能点 1.返回顶 ...
最新文章
- 876. Middle of the Linked List - LeetCode
- ubuntu下zip文件操作
- java blob转file_人工智能-Object Detection API 模型转tflite并验证
- hdu-2204（容斥原理）
- c++Builder XE6 MD5 加密算法 BASE64 URL 编码
- 【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器
- requests 分类多级页面_scrapy框架爬取多级页面
- DSB2017第一名代码尝试运行（记录自用）(五)
- JAVA输入输出IO流→File、RandomAccessFilse、字节流InputSream与OutputStream、字符流Reader与Writer、对象序列化Serializable
- 文件包含漏洞的审计（审计思路）
- FoneDog Data Recovery数据恢复教程
- mysql 5.7 binlog 压缩_MySQL binlog 压缩功能的相关介绍-爱可生
- Laravel 实战视频教程（精品）
- DynamipsGUI使用方法
- python pandas读取txt文件_Pandas 读取txt
- 三天撸完了MyBatis，各位随便问！！（冰河吐血整理，建议收藏）
- Win7系统安装详细教程步骤
- HBuilder IOS 打包异常：com.apple.developer.associated-domains权利 ，解决！
- 【Java】Java爬取国家统计局五级行政区划编码（省、市（州）、县（区）、乡（镇）、村）
- postman接口关联