基于Vue项目的回到顶部插件

在形目中经常要实现回到顶部的效果，所以我在这做了一个回到顶部的插件。

首先，我们先在这说明一下，实现回到顶部的效果所要满足的要求为：要实现回到顶部效果的盒子必须出现横向滚动条。

子组件如下所示：

原理为监听元素的scroll距离，根据距离判断其滚动距离及滚动速度，和按钮的显示隐藏。

<template><div><div class="page-up" @click="scrollToTop" v-show="toTopShow"><span class="iconfont  scrollTop"></span></div></div>
</template><script>
export default {name: 'scrollTop',data () {return {toTopShow: false}},mounted () {this.$nextTick(function () {window.addEventListener('scroll', this.handleScroll, true)})},destroyed () {window.addEventListener('scroll', this.handleScroll, true)},methods: {handleScroll () {let dom = document.getElementsByClassName('content')[0]this.scrollTop = dom.scrollTopif (this.scrollTop > 300) {this.toTopShow = true} else {this.toTopShow = false}},scrollToTop () {let timer = nulllet _this = thiscancelAnimationFrame(timer)timer = requestAnimationFrame(function fn () {if (_this.scrollTop > 5000) {_this.scrollTop -= 1000document.getElementsByClassName('content')[0].scrollTop =_this.scrollToptimer = requestAnimationFrame(fn)} else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {_this.scrollTop -= 500document.getElementsByClassName('content')[0].scrollTop =_this.scrollToptimer = requestAnimationFrame(fn)} else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {_this.scrollTop -= 100document.getElementsByClassName('content')[0].scrollTop =_this.scrollToptimer = requestAnimationFrame(fn)} else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {_this.scrollTop -= 10document.getElementsByClassName('content')[0].scrollTop =_this.scrollToptimer = requestAnimationFrame(fn)} else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {_this.scrollTop -= 5document.getElementsByClassName('content')[0].scrollTop =_this.scrollToptimer = requestAnimationFrame(fn)} else {cancelAnimationFrame(timer)_this.toTopShow = false}})}}
}
</script><style scoped>.page-up{background-color: #F7F7F7;position: fixed;right: 30px;bottom: 55px;width: 40px;height: 40px;line-height: 40px;text-align: center;border-radius: 20px;cursor: pointer;transition: .3s;box-shadow: 0 3px 6px rgba(0, 0, 0, .5);opacity: .5;z-index: 100;}.scrollTop {font-size: 40px;z-index: 10000;}</style>

在这需要说明的是：子组件中的content为滚动的盒子的类名：

组件的使用：

在你所需要的组件中引入即可：

基于Vue项目的回到顶部插件相关推荐

vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
基于 Vue BootStrap的迷你Chrome插件
代码地址如下: http://www.demodashi.com/demo/14306.html 安装安装 Visual Studio Code 和Chrome, 自行翻墙详细安装这里略过安装包 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
解决：vue项目中页面顶部和左边出现空白
vue项目中页面顶部和左边出现空白本次问题是调试login.vue页面时出现的.发现页面顶部和左边出现不应该出现的空白后,打开f12,查看.发现左边的空白是body的margin.于是在本页面css ...
vue-select-tu--一款基于vue的多元图形选择插件
vue-select-tu 一款基于vue的多元图形选择插件 Table of Contents Security Install Usage Maintainers Contributing Lic ...
vue项目引入社交分享插件
vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点. github地址:https://github ...
基于vue简单封装的iframe插件，可修改样式，隐藏滚动条
最近有空,就抽空把以前做过的公司业务组件慢慢抽离出来做成插件,也算是对近年来的技术方面做一个总结吧. 今天要写的是一个用vue-jsx封装的iframe插件,可修改iframe中的样式,隐藏滚动条,默 ...
vue项目中使用视频插件
昨天写一个非物质文化遗址展览项目需要用到视频播放这块, 所以了我就在网站找了一下插件最后确定了就用 vue-vedio-player 首先我们先安装这个插件 npm install vue-video ...

基于Vue项目的回到顶部插件

基于Vue项目的回到顶部插件相关推荐

最新文章

热门文章