Nuxt 滚动到顶部

在网页中，当页面内容较多时，用户往下滚动浏览页面，当需要回到页面顶部时，滚动时的滚动条不方便使用，这时需要一个回到顶部的按钮。在 Nuxt.js 中，我们可以很方便地实现这个功能。

添加一个回到顶部的按钮

首先，在页面中添加一个按钮，用于回到页面顶部。在 vue 文件中添加以下代码:

<template>
  <button @click="scrollTop">回到顶部</button>
</template>

当用户点击这个按钮时，可以调用一个名为scrollTop的方法，用于使页面滚动到顶部。现在，我们来实现这个方法：

<script>
  export default {
    methods: {
      scrollTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }
    }
  };
</script>

在这个方法中，我们使用了 window.scrollTo() 方法将页面滚动到顶部。注意，我们使用了 behavior: "smooth" 属性，用于实现平滑滚动效果。

监听页面滚动事件

当页面滚动时，如果用户需要回到页面顶部，需要显示回到顶部的按钮。我们可以使用 Nuxt.js 提供的 created() 钩子来监听页面滚动事件。

<script>
  export default {
    data() {
      return {
        showBackTop: false // 是否显示回到顶部按钮
      };
    },
    created() {
      window.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > window.innerHeight) {
          this.showBackTop = true;
        } else {
          this.showBackTop = false;
        }
      },
      scrollTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }
    }
  };
</script>

在这个示例中，我们在 created() 钩子中注册了一个监听滚动事件的方法 handleScroll()，这个方法中首先获取当前页面滚动的距离scrollTop，利用 scrollTop 判断是否需要显示回到顶部的按钮。当用户点击回到顶部的按钮时，会调用之前的 scrollTop() 方法。

需要注意的是，在退出页面时，需要将监听事件的方法移除，以防止内存泄漏。在本示例中，我们在 destroyed() 钩子中调用了 window.removeEventListener() 方法，将事件移除。