當(dāng)使用Vue構(gòu)建單頁(yè)應(yīng)用時(shí)，一個(gè)常見(jiàn)的需求就是希望用戶能夠快速返回頁(yè)面的頂部。Vue路由提供了一個(gè)簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn)這個(gè)功能，以下是一個(gè)展示如何滾動(dòng)到頁(yè)面頂部的例子。

export default {
mounted() {
window.scrollTo(0, 0);
}
}

上述代碼使用了window.scrollTo()方法來(lái)滾動(dòng)到頁(yè)面的頂部。該方法的前兩個(gè)參數(shù)分別表示新的文檔的左上角相對(duì)于當(dāng)前窗口左上角的位置。

但是該方法的一個(gè)問(wèn)題是不支持平滑滾動(dòng)。用戶在使用時(shí)可能會(huì)感到突兀，因此我們可以使用CSS3的transition來(lái)實(shí)現(xiàn)平滑滾動(dòng)。

export default {
mounted() {
setTimeout(() =>{
let top = document.getElementById('app').offsetTop
window.scrollTo({
top,
behavior: "smooth"
})
}, 0)
}
}

在上方代碼中，我們首先使用了setTimeout來(lái)確保頁(yè)面能夠完全加載。然后獲取了vue根節(jié)點(diǎn)#app元素在文檔流中的位置。最后使用scrollTo()的新實(shí)現(xiàn)方式來(lái)平滑滾動(dòng)到頁(yè)面的頂部。

當(dāng)然，如果我們使用Vue-Router的話，我們可以通過(guò)傳遞一個(gè)路由鉤子函數(shù)來(lái)實(shí)現(xiàn)滾動(dòng)到頁(yè)面頂部。下面是一個(gè)使用Vue-Router的例子：

const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
title: 'Home',
scrollToTop: true
}
}
]
})
router.beforeEach((to, from, next) =>{
document.title = to.meta.title
if (to.matched.some(route =>route.meta.scrollToTop)) {
setTimeout(() =>{
window.scrollTo({
top: 0,
behavior: "smooth"
})
}, 0)
}
next()
})

在上述代碼中，我們?cè)赩ue-Router定義的meta對(duì)象中增加了一個(gè)scrollToTop屬性。當(dāng)路由到這個(gè)頁(yè)面時(shí)，路由鉤子函數(shù)會(huì)檢測(cè)是否需要滾動(dòng)到頁(yè)面的頂部。如果是的話，就使用scrollTo()方法來(lái)實(shí)現(xiàn)滾動(dòng)到頁(yè)面的頂部。