JS如何實現刷新網頁后之前瀏覽位置保持不變

蝸牛 互聯網技術資訊 2022-08-12 45 0

今天小編給大家分享一下JS如何實現刷新網頁后之前瀏覽位置保持不變的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

正文

在京東上瀏覽的時候,發現了一個比較人性化的小功能,瀏覽商品,瀏覽到一半的時候,如下圖所示:

JS如何實現刷新網頁后之前瀏覽位置保持不變  js 第1張

我重新加載網頁,刷新之后,滾動條依然定位在我剛剛瀏覽的位置,這個小功能感覺還不錯,挺方便的。

具體是怎么實現的呢,去網上大概查了一下。

這個是使用滾動條屬性scrollTop來實現的。

基本實現流程:滾動條移動的時候,將滾動條實時的位置存入Cookie或者localstorage中,但是一些老舊的瀏覽器版本對localstorage支持不是特別友好。

我這里使用的是cookie來存儲。

這里有兩個方法

方法一:這個比較集中

/**
?*?@name:?控制?瀏覽器滾動條
?*?@author:?camellia
?*?@email:?guanchao_gc@qq.com
?*?@date:?2022-01-10?
?*/
window.onscroll?=?function()?{
????????var?scrollPos;
????????if?(typeof?window.pageYOffset?!=?'undefined')?{
????????????scrollPos?=?window.pageYOffset;
????????}
????????else?if?(typeof?document.body?!=?'undefined')?{
????????????scrollPos?=?document.body.scrollTop;
????????}
????????document.cookie?=?"scrollTop="?+?scrollPos;?
????}
????window.onload?=?function?(){
????????if?(document.cookie.match(/scrollTop=([^;]+)(;|$)/)?!=?null)?{
????????????var?arr?=?document.cookie.match(/scrollTop=([^;]+)(;|$)/);?
????????????document.body.scrollTop?=?parseInt(arr[1]);?
????????}
????}

方法二:cookie存取各封裝成函數

這個將cookie的存取各封裝成了一個函數,調用更靈活。

window.onscroll?=?function()?{
????????var?scrollTop?=?document.documentElement.scrollTop?||?window.pageYOffset?||?document.body.scrollTop;
????????SetCookie("a",?scrollTop);
????}
????window.onload?=?function?()?{
????????document.body.scrollTop?=?GetCookie("a");//頁面加載時設置scrolltop高度
????}
????/**
?????*?@name:?設置cookie
?????*?@author:?camellia
?????*?@email:?guanchao_gc@qq.com
?????*?@date:?2022-01-10?
?????*/
????function?SetCookie(sName,?sValue)?{
????????document.cookie?=?sName?+?"="?+?escape(sValue)?+?";?";
????}
????/**
?????*?@name:?讀取cookie
?????*?@author:?camellia
?????*?@email:?guanchao_gc@qq.com
?????*?@date:?2022-01-10?
?????*/
????function?GetCookie(sName)?{
????????var?aCookie?=?document.cookie.split(";?");
????????for?(var?i?=?0;?i?<?aCookie.length;?i++)?{
????????????var?aCrumb?=?aCookie[i].split("=");
????????????if?(sName?==?aCrumb[0])
????????????{
????????????????return?unescape(aCrumb[1]);
????????????}
????????}
????????return?0;
????}

其實這個就是一個對cookie存儲和取值以及scrollTop賦值的一個過程,不是很難。

上邊的兩段代碼,一般情況下,只要放到你的項目里邊就能好用。

如果不好用,請重新檢查一下,你的項目中是否還有別的地方對scrollTop賦值。

以上就是“JS如何實現刷新網頁后之前瀏覽位置保持不變”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看