Vue实现滚动超过250px显示返回顶部按钮问题排查

先帮你梳理下代码里的核心问题，再给出修复方案：

代码里的两个关键问题 #

• computed属性位置错误：你把checkScroll这个计算属性放在了methods对象内部，但Vue的配置规则里，computed是和methods、data同级的顶级选项，这样写Vue根本识别不了这个计算属性，自然不会触发它的逻辑。
• 无滚动事件监听：$(document).scrollTop()不是Vue的响应式数据，就算computed位置正确，滚动页面时它也不会自动重新计算，导致按钮状态一直不变。

修复后的完整代码 #

<template>
  <div>
    <button v-if="isShowTopBtn" class="goTop" @click="backToTop">
      <i class="fa fa-angle-up" aria-hidden="true"></i>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowTopBtn: false // 用响应式变量控制按钮显隐
    }
  },
  mounted() {
    // 组件挂载后添加滚动监听
    window.addEventListener('scroll', this.handleScroll)
    // 初始化时主动检查一次滚动位置，避免页面加载时已滚动到下方却不显示按钮
    this.handleScroll()
  },
  beforeUnmount() {
    // 组件卸载前移除监听，防止内存泄漏
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // 滚动时直接更新响应式变量，Vue会自动触发视图更新
      this.isShowTopBtn = window.pageYOffset > 250
      // 如果你习惯用jQuery，也可以写成 $(document).scrollTop() > 250，效果一致
    },
    backToTop() {
      this.$scrollTo('html')
    }
  }
}
</script>

改动说明 #

1. 用响应式变量控制状态：把原来的computed逻辑换成直接更新data里的响应式变量，滚动时实时修改这个变量，Vue会自动同步视图变化。
2. 添加/移除滚动监听：在组件生命周期钩子中管理滚动事件，确保组件存在时监听滚动，销毁时清理监听，避免不必要的性能消耗。
3. 初始化检查：挂载时主动执行一次滚动检查，避免页面加载时已经滚动到250px以下，按钮却不显示的情况。

如果你坚持想用computed的方式，也可以把computed移到顶级位置，然后在滚动事件里调用this.$forceUpdate()强制触发computed重新计算，但这种方式不如直接更新响应式变量优雅，更推荐上面的方案。

内容的提问来源于stack exchange，提问作者Googldasdas Asdasdas