在許多的網站中,我們可以看到一些滾動條自動記憶功能,這是一個很方便的功能。在頁面刷新之后,滾動條會回到之前瀏覽的位置。在這篇文章中,我們將會使用 jQuery 來實現這個功能。
$(document).ready(function() {
var lastScrollTop = 0;
var scrollPosition = 0;
$(window).scroll(function(event){
scrollPosition = $(this).scrollTop();
});
$(window).unload(function() {
lastScrollTop = scrollPosition;
$.cookie('last_scroll_top', lastScrollTop);
});
if($.cookie('last_scroll_top')) {
$(window).scrollTop($.cookie('last_scroll_top'));
}
});
代碼解釋:
- 首先在文檔準備好后,定義了兩個變量: lastScrollTop 和 scrollPosition,這兩個變量會用于存取滾動條位置
- 當頁面被卸載時,我們將當前的滾動條位置存儲在變量 lastScrollTop 中,并使用 jQuery Cookie 插件將其存儲在瀏覽器 cookie 中
- 在下一次訪問頁面時,我們使用 jQuery Cookie 插件從 cookie 中獲取滾動條位置,并使用 jQuery 將其設置為當前的滾動條位置
這是實現自動記憶滾動條位置的一個簡單方法。當然,你也可以使用一些其他的 JavaScript 庫進行實現。
上一篇jquery讓元素可編輯
下一篇div aka dba