有時候我們需要頁面滾動條滾動到某一固定的位置，一般使用Window scrollTo() 方法。
語法就是：scrollTo(xpos,ypos)
xpos：必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
ypos：必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。
例如滾動內容的坐標位置100,500：
window.scrollTo(100,500);
好了，這個scrollTop這兒只是簡單介紹一下，下面我們介紹下veu-router中的滾動行為。
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在 HTML5 history 模式下可用。
當創建一個 Router 實例，你可以提供一個 scrollBehavior 方法：
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個的位置 }})scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用。
這個方法返回滾動位置的對象信息，長這樣：
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)如果返回一個 falsy (譯者注：falsy 不是 false，參考這里)的值，或者是一個空對象，那么不會發生滾動。
舉例：
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}對于所有路由導航，簡單地讓頁面滾動到頂部。
返回 savedPosition，在按下 后退/前進 按鈕時，就會像瀏覽器的原生表現那樣：
scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } }}如果你要模擬『滾動到錨點』的行為：
scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } }}我們還可以利用路由元信息更細顆粒度地控制滾動。
routes: [ { path: '/', component: Home, meta: { scrollToTop: true }}, { path: '/foo', component: Foo }, { path: '/bar', component: Bar, meta: { scrollToTop: true }} ]完整的例子：
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const Home = { template: '<div>home</div>' }const Foo = { template: '<div>foo</div>' }const Bar = { template: ` <div> bar <div style="height:500px"></div> <p id="anchor">Anchor</p> </div> `}// scrollBehavior:// - only available in html5 history mode// - defaults to no scroll behavior// - return false to prevent scrollconst scrollBehavior = (to, from, savedPosition) => { if (savedPosition) { // savedPosition is only available for popstate navigations. return savedPosition } else { const position = {} // new navigation. // scroll to anchor by returning the selector if (to.hash) { position.selector = to.hash } // check if any matched route config has meta that requires scrolling to top if (to.matched.some(m => m.meta.scrollToTop)) { // cords will be used if no selector is provided, // or if the selector didn't match any element. position.x = 0 position.y = 0 } // if the returned position is falsy or an empty object, // will retain current scroll position. return position }}const router = new VueRouter({ mode: 'history', base: __dirname, scrollBehavior, routes: [ { path: '/', component: Home, meta: { scrollToTop: true }}, { path: '/foo', component: Foo }, { path: '/bar', component: Bar, meta: { scrollToTop: true }} ]})new Vue({ router, template: ` <div id="app"> <h1>Scroll Behavior</h1> <ul> <li><router-link to="/">/</router-link></li> <li><router-link to="/foo">/foo</router-link></li> <li><router-link to="/bar">/bar</router-link></li> <li><router-link to="/bar#anchor">/bar#anchor</router-link></li> </ul> <router-view class="view"></router-view> </div> `}).$mount('#app')在網上查了一下，網友說還可以試試在main.js入口文件配合vue-router寫這個
router.afterEach((to,from,next) => { window.scrollTo(0,0);});總結
以上所述是小編給大家介紹的vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
