vue 回到顶部效果实现
<div class="goPageTop"> <img v-if="btnFlag" class="go-top" src="@/assets/images/Back_top.png" @click="backTop" /> </div>
export default { name: "", components: {}, props: {}, data() { return { btnFlag:false }; }, computed: {}, watch: {}, created() {}, mounted() { window.addEventListener("scroll", this.scrollToTop); }, destroyed() { window.removeEventListener("scroll", this.scrollToTop); }, 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); }, scrollToTop() { const that = this; let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; that.scrollTop = scrollTop; if (that.scrollTop > 60) { that.btnFlag = true; } else { that.btnFlag = false; } }, }, };
.goPageTop img { width: 40px; height: 40px; position: fixed; right: 10px; bottom: 60px; z-index: 9; }