vue切換頁面(路由)時如何保持滾動條回到頂部

更新時間：2022年12月06日 14:16:55 作者：牛先森家的牛奶

這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue切換“頁面”(路由)時保持滾動條回到頂部

vue項目做pc端的時候，發(fā)現(xiàn)在兩個頁面切換時滾動條沒有回到頂部而是保持原先的位置；

這是由于vue是單頁面應(yīng)用，只是更換了路由內(nèi)容，還在當(dāng)前頁面滾動條是不會回到頂部的。

解決辦法是在切換路由的時候，將滾動區(qū)域的滾動條復(fù)位為0。

? // 使用 watch 監(jiān)聽$router的變化,
? watch: {
? ? '$route': function(to, from) {
　? ? document.body.scrollTop = 0
? ? ? document.documentElement.scrollTop = 0
? ? }
? }

當(dāng)然看頁面的布局，可能滾動區(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在將頁面滾動到頁面中部或者底部（反正不在頂部），再進(jìn)行頁面跳轉(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源碼解析之事件機(jī)制原理
這篇文章主要介紹了vue源碼解析之事件機(jī)制原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
深入理解vue中slot與slot-scope的具體使用
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
vue彈窗插件實戰(zhàn)代碼
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
uniapp?獲取系統(tǒng)信息的方法小結(jié)
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同
2022-11-11
Ant Design Pro 之 ProTable使用操作
這篇文章主要介紹了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)動處理。就像一個社會熱點(diǎn)事件，當(dāng)它有消息更新的時候，各方媒體都會跟進(jìn)做相關(guān)報道。這里社會熱點(diǎn)事件就是被觀察的目標(biāo)
2022-06-06
vue圖片裁剪插件vue-cropper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Vue中使用vue-pdf嵌入和展示PDF文件
在vue中實現(xiàn)在線預(yù)覽PDF文件我們可以使用vue-pdf來實現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10