vue切換頁面(路由)時如何保持滾動條回到頂部
更新時間：2022年12月06日 14:16:55 作者：牛先森家的牛奶
這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue切換“頁面”(路由)時保持滾動條回到頂部
vue項目做pc端的時候，發(fā)現(xiàn)在兩個頁面切換時 滾動條沒有回到頂部而是保持原先的位置；
這是由于vue是單頁面應(yīng)用，只是更換了路由內(nèi)容，還在當前頁面滾動條是不會回到頂部的。
解決辦法是在切換路由的時候，將滾動區(qū)域的滾動條復位為0。
? // 使用 watch 監(jiān)聽$router的變化,
? watch: {
? ? '$route': function(to, from) {
? ? document.body.scrollTop = 0
? ? ? document.documentElement.scrollTop = 0
? ? }
? }當然看頁面的布局，可能滾動區(qū)域并不是document的scrollTop為0 能有效果，和項目里面的布局滾動區(qū)域有關(guān)，下面是項目里面的滾動區(qū)域 app-main ；
<template> ? <div id="app"> ? ? <router-view /> ? ? <!-- 骨架屏，在菜單組件觸發(fā)隱藏，目前沒想到又好的方式處理 --> ? ? <common-skeleton v-if="showSkeleton" /> ? </div> </template>
<script>
import CommonSkeleton from './components/Skeleton/common'
export default {
? name: 'App',
? components: {
? ? CommonSkeleton
? },
? computed: {
? ? showSkeleton() {
? ? ? return this.$store.state.settings.showSkeleton
? ? }
? },
? watch: {
? ? '$route'(val) {
? ? ? if (!document.getElementsByClassName('app-main') || !document.getElementsByClassName('app-main').length) {
? ? ? ? return
? ? ? }
? ? ? document.getElementsByClassName('app-main')[0].scrollTop = 0
? ? }
? }
}
</script><style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
#app {
? width: 100%;
? height: 100%;
? @include clearfix;
}
</style>vue頁面跳轉(zhuǎn)后，滾動條不在頂部的解決
問題描述
vue在將頁面滾動到頁面中部或者底部（反正不在頂部），再進行頁面跳轉(zhuǎn)后，新頁面的滾動條還處于上一個頁面的位置，并沒有更新到頁面頂部
解決方法
在全局路由鉤子里面將頁面滾動到頁面頂部
router.beforeEach((to, from, next) => {
? ? document.body.scrollTop = 0;
? ? document.documentElement.scrollTop = 0;
?
? ? // 兼容IE
? ? window.scrollTo(0, 0);
? ? next();
})以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue源碼解析之事件機制原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同2022-11-11
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個數(shù)據(jù)結(jié)構(gòu))
這篇文章主要介紹了手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個數(shù)據(jù)結(jié)構(gòu)),響應(yīng)式就是被觀察的數(shù)據(jù)變化的時候做一系列聯(lián)動處理。就像一個社會熱點事件，當它有消息更新的時候，各方媒體都會跟進做相關(guān)報道。這里社會熱點事件就是被觀察的目標2022-06-06
這篇文章主要為大家詳細介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
在vue中實現(xiàn)在線預覽PDF文件我們可以使用vue-pdf來實現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-10-10