vue实现页面返回顶部功能

橙子微笑

已于 2022-01-20 13:50:37 修改

阅读量654

点赞数

分类专栏： VUE 文章标签： javascript vue.js html

于 2021-10-18 16:31:22 首次发布

本文链接：https://blog.csdn.net/m0_44949211/article/details/120829090

版权

在Vue项目中，遇到监听滚动条时window.pageYOffset等值始终为0的问题，原因是页面中有div设置了overflow-y:auto。解决方法是移除该样式或改为overflow-y:visible。

摘要由CSDN通过智能技术生成

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