情景描述

1.頁面 /a, 有輸入框, 當輸入框輸入合適的值的時候, 不隱藏軟鍵盤, 點擊相應按鈕直接跳到 /b
2.頁面 /b, 頁面本來內容很少, 沒有滾動條的, 可是莫名的被下方的灰色區域頂到可視區上面, 內容被隱藏了一點, 但是手動拉回正常展示以后, 問題就不再重現

解決辦法(針對單個頁面這個問題的)

// 在/b頁面, vue的mounted方法中, 寫設置頁面滾動條的這個方法 mounted() {// 切換頁面時滾動條自動滾動到頂部window.scrollTo(0,0); }

針對全部頁面的話, 可以在路由的鉤子函數中設置(main.js中)

// 放在`router.beforeEach`更好 router.afterEach((to,from,next) => {window.scrollTo(0,0);// 或// window.scroll(0, 0); }); router.afterEach(() => {document.body.scrollTop = 0;document.documentElement.scrollTop = 0; }) 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue路由切换时内容组件的滚动条回到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。