Question

我之前看到了这个答案，但我得到的答案对我来说似乎没有用。我是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。提前谢谢。

Answer 1

您可能会遗漏包括使用$.cookie代码的外部js库。我建议您尝试使用HTML5 Web Storages

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

    $(window).on("scroll", function() {
      localStorage.setItem("scroll", $(window).scrollTop());
    });

});

FIDDLE

Answer 2

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

Answer 3

如果你确实包含了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的localstorage规范的备用解决方案。

//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!!";
};

Answer 4

您可以使用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);
});

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

4 个答案: