一般頁面滑動到很深，需要點擊回到頂部 如果一直滑動回到頂部就很麻煩 我們直接如下效果圖

生成一個回到頂部的按鈕 點擊按鈕自動滾動到頂部 那么怎么來寫請往下繼續看 ======

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一键回到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。