用js+cookie记录滚动条位置方法

下面我将为您详细介绍用JS+Cookie记录滚动条位置的完整攻略。

1. Cookie简介

Cookie 是一种在浏览器存储数据的小文件。Cookie 可以用于会话管理、个性化设置、购物车、广告跟踪等方面。

Cookie 是通过 JavaScript 中的 document.cookie 属性进行访问和修改，可以存储少量的数据，通常不超过 4 KB。每个 Cookie 最长可以存在 7 天，也可以在设置过期时间时指定 Cookie 的过期时间。

2. 记录滚动条位置

记录滚动条的位置很简单，可以使用 $(window).scrollTop() 来获取当前窗口滚动条的位置。

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

但是当用户刷新页面或关闭浏览器时，数据会丢失。因此需要使用 Cookie 来保存滚动条的位置。

下面提供两种方法实现记录滚动条位置：

方法一：使用 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"));
}
});


// 点击某个元素触发写入记录

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

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