二维码防伪系统
各种活动实时推动
下面我将为您详细介绍用JS+Cookie记录滚动条位置的完整攻略。
Cookie 是一种在浏览器存储数据的小文件。Cookie 可以用于会话管理、个性化设置、购物车、广告跟踪等方面。
Cookie 是通过 JavaScript 中的 document.cookie 属性进行访问和修改，可以存储少量的数据，通常不超过 4 KB。每个 Cookie 最长可以存在 7 天，也可以在设置过期时间时指定 Cookie 的过期时间。
记录滚动条的位置很简单，可以使用 $(window).scrollTop() 来获取当前窗口滚动条的位置。
var scrollPosition = $(window).scrollTop();
但是当用户刷新页面或关闭浏览器时，数据会丢失。因此需要使用 Cookie 来保存滚动条的位置。
下面提供两种方法实现记录滚动条位置：
// 保存滚动条位置 document.cookie = "scrollPosition=" + $(window).scrollTop(); // 获取滚动条位置 var scrollPosition = parseInt(document.cookie.match(/scrollPosition=(d+)/)[1]); $(window).scrollTop(scrollPosition);
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"));
}
上述方法二是使用 jQuery Cookie 插件实现读取和写入滚动条位置的方法。如果您对原生的 JavaScript 有更深入的了解，也可以使用方法一中的 raw JavaScript 实现方式。
通过保存滚动条位置，我们可以在用户刷新页面或重新访问时恢复滚动条的位置，提供更好的用户体验。
copy © 2025 星澜网络 All Rights Reserved
备案号:鲁ICP备2023015769号
