vue 页面滚动到顶部

在Vue.js中，当页面滚动到顶部时，通常会使用JavaScript的scroll事件或者Vue的自定义指令来实现这样的效果。以下是一个简单的示例：

<template>
  <button @click="scrollToTop">滚动到顶部</button>
  <div ref="scrollTarget">这是内容区域</div>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      // 使用 Vue 的 ref 属性获取内容区元素
      const scrollTarget = this.$refs.scrollTarget;
      
      // 当页面滚动到底部时，滚动到顶部
      window.onscroll = function() {
        if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
          scrollTarget.scrollTop = 0; // 或者 scrollTarget.scrollTo({ top: 0 })
        }
      };
    },
  },
}
</script>

在这个例子中，当点击按钮时，`scrollToTop`方法会被触发，它会在窗口滚动事件中检查是否已经滚动到底部。如果已滚动到底部，就会将内容区域滚动回顶部。