nuxt 页面滚到顶部

你可以使用 Nuxt.js 自带的插件 `$nuxt` 来访问 Vue Router 实例，并使用 `scrollTo()` 方法将页面滚动到顶部。

以下是一个例子：

export default {
  methods: {
    scrollToTop() {
      this.$nuxt.$emit('scrollTo', 0)
    }
  }
}

在上述例子中，`scrollToTop()` 方法会触发 `scrollTo` 事件并将其发送到 `$nuxt` 实例。事件的第一个参数是要滚动到的位置，这里设置为 `0` 表示滚动到页面顶部。

你还需要在需要滚动到顶部的组件中添加以下代码：

<template>
  <button @click="scrollToTop">Scroll to top</button>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      this.$nuxt.$emit('scrollTo', 0)
    }
  }
}
</script>

这将在页面上添加一个按钮，当点击该按钮时，页面将滚动到顶部。

相关问题

nuxt 路由跳转返回顶部详解

在 Nuxt 中，可以使用 `scrollToTop` 选项来在路由切换时返回页面顶部。这个选项可以在 `nuxt.config.js` 中进行全局配置，也可以在单个页面组件中进行配置。

#### 全局配置

在 `nuxt.config.js` 中添加以下配置：

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  }
}

这样在每次路由切换时，页面都会滚动到顶部。

#### 单个页面组件配置

如果只想在某个页面组件中启用返回顶部功能，可以在组件中添加以下代码：

export default {
  scrollToTop: true,
  // ...
}

这样在这个页面组件中，每次路由切换时，页面都会滚动到顶部。

#### 自定义返回顶部行为

如果需要自定义返回顶部的行为，可以在路由配置中的 `scrollBehavior` 方法中进行修改：

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      // 如果有 savedPosition，则滚动到保存的位置
      if (savedPosition) {
        return savedPosition
      } else {
        // 否则滚动到页面顶部
        return { x: 0, y: 0 }
      }
    }
  }
}

在 `scrollBehavior` 方法中，可以根据参数 `to` 和 `from` 来判断路由切换的方向，从而决定滚动方向和距离。

nuxt跳转不会回到顶部

在 Nuxt 中，可以使用 `nuxt-link` 或者 `this.$router.push` 进行路由跳转。在进行路由跳转时，可以使用 `scrollToTop` 选项来自动回到页面顶部。

使用 `nuxt-link`：

<nuxt-link to="/" :scroll-to-top="true">Home</nuxt-link>

使用 `this.$router.push`：

this.$router.push({
  path: '/',
  query: {},
  scrollToTop: true
})

如果你使用的是旧版本的 Nuxt（v1.x），则需要在 `nuxt.config.js` 中添加以下代码：

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        return {
          selector: to.hash
        }
      } else if (to.matched.some(m => m.meta.scrollToTop)) {
        return {
          x: 0,
          y: 0
        }
      } else if (savedPosition) {
        return savedPosition
      } else {
        return {
          x: 0,
          y: 0
        }
      }
    }
  }
}

然后在需要回到页面顶部的路由中添加 `scrollToTop: true`：

export default {
  meta: {
    scrollToTop: true
  }
}

希望以上内容能够帮助到你。