使用javascript中的cookie存储和恢复滚动位置

Store and recover scroll position using cookies in javascript

本文关键字：恢复 滚动 位置 存储 javascript 中的 cookie 使用      更新时间：2023-09-26

我之前看到了这个问题的答案，但我得到的答案似乎对我不起作用。我是javascript的初学者，如果有人能解释我做错了什么，我将不胜感激。

我的代码在这里：

<script type="text/javascript">
        $(document).ready(function()
        {
            if ( $.cookie("scroll") != null )
            {
                $(window).scrollTop( $.cookie("scroll") );
            }
            $(window).on("scroll", function()
            {
                $.cookie("scroll", $(window).scrollTop() );
            });
        });
    </script>

正如标题中所说，我想要实现的是使用cookie存储用户的滚动位置，并且当页面刷新时，该位置将保持不变。如果有其他方法的话，我不需要使用cookie。提前谢谢。

如果您确实包含了jquery cookie，那么一切都应该按预期工作：

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

工作地点：http://output.jsbin.com/nizejuw

这是一个替代解决方案，使用HTML5的本地存储规范。

//loading soln
$(function() {
  if (localStorage.tempScrollTop) {
    $(window).scrollTop(localStorage.tempScrollTop);
    alert("loaded postion : " + localStorage.tempScrollTop);
  }
});

//saving soln 1
$(window).on("scroll", function() {
  localStorage.setItem("tempScrollTop", $(window).scrollTop());
});
//saving soln 2
window.onbeforeunload = function() {
  var tempScrollTop = $(window).scrollTop();
  localStorage.setItem("tempScrollTop", tempScrollTop);
  return "Saved scroll to localstorage!!";
};

您可能缺少一个使用$.cookie代码的外部js库。我可以建议您尝试使用HTML5 Web存储

 $(document).ready(function() {
    if (localStorage.getItem("scroll") != null) {
      $(window).scrollTop(localStorage.getItem("scroll"));
    }
    $(window).on("scroll", function() {
      localStorage.setItem("scroll", $(window).scrollTop());
    });
});

FIDDLE

document.location.reload(true)存储位置，是的最短选项

您可以使用Cookie js

$(document).ready(function () {
            $(".sidebar-nav").scroll(function () {
                // cookie'ye kaydedilir
                Cookies.set("AT_SidebarNav_ScrollTop", $(".sidebar-nav").scrollTop());
            });
            if (Cookies.get("AT_SidebarNav_ScrollTop")) {
                $(".sidebar-nav").scrollTop(Cookies.get("AT_SidebarNav_ScrollTop"));
                console.log(".sidebar-nav scrollTop:" + Cookies.get("AT_SidebarNav_ScrollTop"));
            }
        });

js cookie：https://github.com/js-cookie/js-cookie

您可以使用超时来阻止ui:

var timeout;
$(window).scroll(function (event) {
    var scroll_positon = $(window).scrollTop();
    clearTimeout(timeout); //clear it to avoid crazy writing
    //and create a new interval to write it later
    timeout = setTimeout(function () {
        Cookies.set('prev_scroll_position', scroll_positon);
    }, 250);
});
相关文章：