Question

我在我的网络应用程序中使用this scrollTo插件。问题是我希望能够刷新页面并保存滚动位置，以便当页面重新加载它与重新加载之前的位置相同。任何想法我怎么能得到这个？谢谢... 为了方便起见，插件的代码在这里：

$.fn.scrollTo = function( target, options, callback ){
  if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
  var settings = $.extend({
    scrollTarget  : target,
    offsetTop     : 50,
    duration      : 500,
    easing        : 'swing'
  }, options);
  return this.each(function(){
    var scrollPane = $(this);
    var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
    var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
    scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
      if (typeof callback == 'function') { callback.call(this); }
    });
  });
}

Answer 1

您可以尝试使用localStorage来保存滚动位置。

window.onbeforeunload = function() {
    localStorage.setItem('lastScrollPosition', x);
};
window.onload = function() { scrollTo(localStorage.getItem('lastScrollPosition')); }

粗鲁的例子

Answer 2

如果您想要最终的交叉兼容性，请使用一个简单的库来模糊底层的存储机制。这样，无论用户使用什么浏览器以及浏览器为存储实现了哪些技术，都可以使用！ IE8之前不支持LocalStorage，但对于消费者而言，这可能不适用于企业环境。

http://www.jstorage.info/

$.jStorage.set(key, value, options);
$.jStorage.set('pageXYZ_scrollTarget', target);

value = $.jStorage.get(key);
value = $.jStorage.get('pageXYZ_scrollTarget');

或者，您可以使用Cookie，因为它们是交叉兼容的。

重新加载网页，同时保存滚动位置并返回到它

2 个答案: