下面我將為您詳細介紹用JS+Cookie記錄滾動條位置的完整攻略。

1. Cookie簡介

Cookie 是一種在瀏覽器存儲數(shù)據(jù)的小文件。Cookie 可以用于會話管理、個性化設置、購物車、廣告跟蹤等方面。

Cookie 是通過 JavaScript 中的 document.cookie 屬性進行訪問和修改，可以存儲少量的數(shù)據(jù)，通常不超過 4 KB。每個 Cookie 最長可以存在 7 天，也可以在設置過期時間時指定 Cookie 的過期時間。

2. 記錄滾動條位置

記錄滾動條的位置很簡單，可以使用 $(window).scrollTop() 來獲取當前窗口滾動條的位置。

var scrollPosition = $(window).scrollTop();

但是當用戶刷新頁面或關閉瀏覽器時，數(shù)據(jù)會丟失。因此需要使用 Cookie 來保存滾動條的位置。

下面提供兩種方法實現(xiàn)記錄滾動條位置：

方法一：使用 raw JavaScript

// 保存滾動條位置
document.cookie = "scrollPosition=" + $(window).scrollTop();

// 獲取滾動條位置
var scrollPosition = parseInt(document.cookie.match(/scrollPosition=(d+)/)[1]);
$(window).scrollTop(scrollPosition);

方法二：使用 jQuery Cookie 插件

jQuery Cookie 插件是一個非常方便的工具，它可以在 jQuery 中輕松地讀取和寫入 Cookie。

CDN引用路徑：

 <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>  
 <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>  
 

// 保存滾動條位置
$.cookie("scrollPosition", $(window).scrollTop());

// 獲取滾動條位置
var scrollPosition = parseInt($.cookie("scrollPosition"));
$(window).scrollTop(scrollPosition);

// 另外一種形式

$(window).on("scroll", function() {
$.cookie("tempScrollTop", $(window).scrollTop());
});
$(function() {if ($.cookie("tempScrollTop")) {
$(window).scrollTop($.cookie("tempScrollTop"));
alert("loaded postion : " + $.cookie("tempScrollTop"));
}
});


// 點擊某個元素觸發(fā)寫入記錄

function add_cookie(){
var tempScrollTop = $(window).scrollTop();
$.cookie("tempScrollTop", $(window).scrollTop());
}

window.onload = function() {
var tempScrollTop = parseInt($.cookie("tempScrollTop"));
$(window).scrollTop($.cookie("tempScrollTop"));
}

3. 總結(jié)

上述方法二是使用 jQuery Cookie 插件實現(xiàn)讀取和寫入滾動條位置的方法。如果您對原生的 JavaScript 有更深入的了解，也可以使用方法一中的 raw JavaScript 實現(xiàn)方式。

通過保存滾動條位置，我們可以在用戶刷新頁面或重新訪問時恢復滾動條的位置，提供更好的用戶體驗。

掃描二維碼手機查看該文章