nuxt 页面滚到顶部
时间: 2024-05-03 09:18:24 浏览: 230
react-scroll-to-top:轻巧的按钮组件,可滚动到页面顶部
你可以使用 Nuxt.js 自带的插件 `$nuxt` 来访问 Vue Router 实例,并使用 `scrollTo()` 方法将页面滚动到顶部。
以下是一个例子:
```javascript
export default {
methods: {
scrollToTop() {
this.$nuxt.$emit('scrollTo', 0)
}
}
}
```
在上述例子中,`scrollToTop()` 方法会触发 `scrollTo` 事件并将其发送到 `$nuxt` 实例。事件的第一个参数是要滚动到的位置,这里设置为 `0` 表示滚动到页面顶部。
你还需要在需要滚动到顶部的组件中添加以下代码:
```html
<template>
<button @click="scrollToTop">Scroll to top</button>
</template>
<script>
export default {
methods: {
scrollToTop() {
this.$nuxt.$emit('scrollTo', 0)
}
}
}
</script>
```
这将在页面上添加一个按钮,当点击该按钮时,页面将滚动到顶部。
阅读全文