vue实现页面返回顶部功能
注：记自己在项目中关于回到顶部遇到的问题
问题：
vue监听滚动条window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop一直为0
原因：
页面中的一个div定义了overflow-y:auto，而页面滚动一直滚动的时这个div window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop当然一直为0，
解决办法：
将overflow-y:auto去掉或改为overflow-y:visible
<template><div id="goTop"><div class="goTop" v-show="goTopShow" @click="goTop">回到顶部</div></div></template><script>export default {name: "goTop",data() {return {scrollTop: "",goTopShow: false};},watch: {scrollTop(val) {if (this.scrollTop > 500) {this.goTopShow = true;} else {this.goTopShow = false;}}},methods: {handleScroll() {this.scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;if (this.scrollTop > 500) {this.goTopShow = true;}},goTop() {let timer = null,_that = this;cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn() {if (_that.scrollTop > 0) {_that.scrollTop -= 250;document.body.scrollTop = document.documentElement.scrollTop =_that.scrollTop;timer = requestAnimationFrame(fn);} else {cancelAnimationFrame(timer);_that.goTopShow = false;}});}},mounted() {window.addEventListener("scroll", this.handleScroll);},destroyed() {window.removeEventListener("scroll", this.handleScroll);}};</script><style scoped lang="less">.goTop {position: fixed;right: 20px;bottom: 160px;width: 40px;height: 40px;border-radius: 50%;background: #fff;padding: 10px;cursor: pointer;box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);}</style>
