vue一键回到顶部

一般页面滑动到很深，需要点击回到顶部 如果一直滑动回到顶部就很麻烦 我们直接如下效果图

生成一个回到顶部的按钮 点击按钮自动滚动到顶部 那么怎么来写请往下继续看 ======

goto.vue

在component文件夹-goto.vue !<template><div class="goto"><div v-if="btnFlag" class="goto" @click="backTop"><img src="https://g.csdnimg.cn/side-toolbar/3.0/images/fanhuidingbucopy.png" alt /></div></div> </template> <script> export default {data() {return {btnFlag: false};},methods: {// 点击图片回到顶部方法，加计时器是为了过渡顺滑backTop() {const that = this;let timer = setInterval(() => {let ispeed = Math.floor(-that.scrollTop / 5);document.documentElement.scrollTop = document.body.scrollTop =that.scrollTop + ispeed;if (that.scrollTop === 0) {clearInterval(timer);}}, 16);},// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏scrollToTop() {const that = this;let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;that.scrollTop = scrollTop;if (that.scrollTop > 100) {that.btnFlag = true;} else {that.btnFlag = false;}}},// 初始化获取所有数据mounted() {window.addEventListener("scroll", this.scrollToTop);},destroyed() {window.removeEventListener("scroll", this.scrollToTop);} }; </script> <style lang="scss" scoped> .main {width: 100%;height: 100vh;position: relative;.goto {position: fixed;right: 0;top: 80%;width: 60px;border-radius: 10%;text-align: center;background: gray;} } </style>

需要使用到的页面

import goto from "../components/goto";//引入components: {goto}其次在标签当中写入<goto/>

• end ==============

这样就会生成你想要的效果 就实现了 哪个页面需要进行调取

总结

以上是生活随笔为你收集整理的vue一键回到顶部的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。