場景：微信公眾號里面的頁面，有個列表頁面，有詳情頁

這個列表是接口返回的，頁面一般顯示4條數據so 傳4；然后下面有個點擊查看更多，page:1size:4

剛開始我想用keep-alive(應為我使用的vue技術戰)；keep-alive只能包裹組件，我這個列表是v-for div 沒抽成組件，我嘗試了keep-alive包裹這個div　　

結果頁面上始終只顯示一條數據，行不通，我就用的記錄scrollTop值的方法來弄的；

核心思想

 mounted() {
// 這里為啥要緩存tableData呢，因為這尼瑪點擊查看更多只能是4條數據，你不可能取存formData瑟（上面data聲明的），這樣它就只會請求接口的時候帶上這個page：3 size:4始終只會有4條數據，而且滾動值也不對
所以緩存數組的值，這樣返回list頁面就可以

let a=JSON.parse(sessionStorage.getItem('arrlist')) 
if (a&&a.length>0)
 { this.tableData=a }
else{ this.loadData(); } 
// 取 this.timeName = setTimeout(() => { 

//因為document.body.scrollTop和document.documentElement.scrollTop 只有一個值生效so都給你馬附上值，總有一個生效

document.body.scrollTop = parseInt(sessionStorage.getItem("pos")); 
document.documentElement.scrollTop = parseInt( sessionStorage.getItem("pos") );
 }, 100);
　　// 存
    window.addEventListener("scroll", this.handleScroll);
  },
methods:{

handleScroll() {
let scrollTop =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop; //兼容寫法
sessionStorage.setItem("pos", scrollTop);
},

}

注意事項：

beforeDestroy() {
// 清楚定時器
clearInterval(this.timeName);
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll); //監聽頁面滾動事件
},
清楚定時器以及清楚瀏覽器scroll事件，不然其他頁面也會執行的

返回按鈕的時候，要清理數據，不然下次進來你懂的，本來返回是通用組件的，但是這里要清楚數據，所以這里的返回不是共用組件

goback() {
this.$router.go(-1);
sessionStorage.removeItem("pos");
sessionStorage.removeItem("arrlist");
},

*****************************************

標準瀏覽器是只認識documentElement.scrollTop的，但chrome雖然我感覺比firefox還標準，但卻不認識這個，在有文檔聲明時，chrome也只認識document.body.scrollTop

document.body.scrollTop與document.documentElement.scrollTop兩者有個特點，就是同時只會有一個值生效。所以呢上面代碼中：

document.body.scrollTop = parseInt(sessionStorage.getItem("pos")); 
document.documentElement.scrollTop = parseInt( sessionStorage.getItem("pos") );
都賦值反正只有一個生效

*****************************************

比如document.body.scrollTop能取到值的時候，document.documentElement.scrollTop就會始終為0；反之亦然。所以，如果要得到網頁的真正的scrollTop值，可以這樣：

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

這兩個值總會有一個恒為0，所以不用擔心會對真正的scrollTop造成影響。

一點小技巧，但很實用。

*************************************

還有一種情況就是我進入某個頁面，這個頁面并不是在最頂部，我也不知道為啥，header看不見，只有往上滑才能看見，

針對單個頁面這個問題的

mounted(){

　　window.scrollTo(0,0);

}

針對全部頁面的話, 可以在路由的鉤子函數中

router.afterEach((to,from,next) => { window.scrollTo(0,0); // 或 // window.scroll(0, 0); });

總結

以上是生活随笔為你收集整理的项目遇到的问题总结（一）：list列表点击查看详情，详情页返回list页面时，位置不变（scrollTop）的全部內容，希望文章能夠幫你解決所遇到的問題。

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