回溯历史时，Sammy.js 缓存和滚动位置答案

【问题标题】：Sammy.js cache and scroll position when going back in history回溯历史时，Sammy.js 缓存和滚动位置
【发布时间】：2016-09-01 11:09:46
【问题描述】：

我不知道是否有人仍在使用 Sammy.js，但我发现它非常适合我对轻量级路由和模板库的需求。如果有人有其他想法，请告诉我。

我的问题是当我有一个长页面并且我向下滚动时，单击该页面上的一个链接并返回，整个页面被重新加载（在 Sammy 中，调用了 GET 路由）并跳转到顶部页面。

我的问题是：有没有办法让 Sammy 缓存页面并在返回历史记录时保持滚动位置？

提前致谢。

【问题讨论】：

我建议作为一种解决方法，stackoverflow.com/a/5651372/2346893 与stackoverflow.com/a/10115269/2346893 结合使用，您还可以在滚动页面时将当前可见元素的 id 添加到哈希历史记录中，如果您不想手动完成。
您可以使用 localstorage 将 scrolltop 和 url 作为参数传递给每个访问的页面。

标签： javascript jquery sammy.js

【解决方案1】：

您可以使用 localStorage 作为将 url-scrolltop 存储为一对的替代方式。这样浏览器记住指定url的srolltop位置。

var scroltop,url;
$(window).scroll(function() {
    scroltop = $(this).scrollTop();
    url = window.location.href;
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
    localStorage.setItem(url,scroltop);
    }, 250));
});
if(localStorage.getItem(window.location.href)) {
  url = window.location.href;
  scroltop = localStorage.getItem(url);
  $(window).scrollTop(scroltop);   
}

JSbin example

【讨论】：