Vue.js 滚动到同一路线的页面顶部
我可以像这样为 Vue.js 路由器设置滚动行为：
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'index',
component: Main
},
{
path: '/some-path',
name: 'some-path',
component: SomePath
}
],
scrollBehavior() {
return {x: 0, y: 0}
}
})
当您单击某些非当前页面的链接时，这非常有效。当我单击已经呈现的链接时，即在页脚中，没有任何反应。 Vue Router 假设没有状态转换。在这种情况下，向上滚动的首选方式是什么？
您无法通过 vue-router 执行此操作，但您可以为每个 router-link 添加一个滚动到顶部的方法。
只需创建一个这样的方法：
methods: {
scrollToTop() {
window.scrollTo(0,0);
}
}
将其添加到链接中：
<router-link @click.native="$scrollToTop">
如果你也想在页脚之外使用它，最好将它添加到 Vue 原型中
Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)
这不是 100% 的解决方案，但它是最简单的解决方案
我无法让上述任何解决方案发挥作用，这真的很令人沮丧。
最终为我工作的是以下内容：
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior() {
document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
}
})
我将我的 VueJs 应用程序安装到 #app，因此我可以确定它存在并且可供选择。
scrollTo(0,0) 时遇到了问题
.navbar .fixed-top（与 #app { margin-top: 60px; } 最好使用 scrollBehavior() { window.scrollTo(0,0); }
您可以使用 behavior: smooth：
moveTo () {
let to = this.moveToDown
? this.$refs.description.offsetTop - 60
: 0
window.scroll({
top: to,
left: 0,
behavior: 'smooth'
})
this.moveToDown = !this.moveToDown
}
我为此找到的最佳解决方案是：https://router.vuejs.org/guide/advanced/scroll-behavior.html
具体来说：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
to, from, savedPosition 返回 not defined。你如何解决这个问题？
扩展 Vitaly Migunov 的答案，您可以直接从路由器添加一个 scrollTo 方法到窗口对象。这样您就不需要将功能添加到每个路由器链接。
const router = new Router({
mode: 'history',
routes: [...],
scrollBehavior() {
window.scrollTo(0,0);
}
})
使用 refs 滚动到特定部分
<template>
<body>
<div ref="section">
// Your content section
</div>
</body>
</template>
export default class MyPage extends Vue {
$refs!: {
section: HTMLFormElement;
};
scrollToTop() {
this.$refs.section.scrollTo(0, 0);
}
}
基本上，我认为您想滚动到页面顶部，除非指定了内部页面位置（例如 www.example.com/home#blah）。到目前为止，所有答案都将忽略此位置参数，并且无论如何都滚动到顶部。
scrollBehavior(to, from, savedPosition) {
//If there is no hash parameter when we change vue, scroll to top of page
if (!to.hash) {
return { x: 0, y: 0 }
}
}
我们可以使用 to.hash 检查是否有位置参数，如果不存在哈希位置，则仅滚动到顶部。
这对我有用：
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior() {
document.getElementById('app').scrollIntoView({behavior:'smooth'});
}
})
我已经尝试了上述所有答案，但没有一个对我有用；但是我已经尝试过这个，它为我完成了这项工作；将此添加到您的 App.vue 文件中
updated() {
this.$refs.main.scrollTo(0, 0)
},
或者，这也对我有用：
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior(to, from, savedPosition) {
document.getElementById('app').scrollTop = 0
},
routes
})
对于 Vue3
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 }
},
})
如果浏览器支持 history.pushState，Vue Js 就内置了对滚动的支持。
配置非常简单，只需要提供 scrollBehavior 功能，创建 Vue 路由器实例时如下所示：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// page scroll to top for all route navigations
return { x: 0, y: 0 }
}
})
有关 Vue 滚动行为的更多选项和详细信息click here
使用这个不错的组件：https://www.npmjs.com/package/vue-backtotop
<back-to-top text="Back to top"></back-to-top>
关注公众号
不定期副业成功案例分享
#app，而是类似#app-content，这取决于您的应用程序的布局。<router-link @click.native="scrollToTop">