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

Question

I am using this scrollTo plugin in my web application. the problem is i want to be able to refresh the page and save the scrolling position so that when page reloads its in the same position as before the reload. any idea how can i achive this one? thx... for convenience im ading the plugin's code here :

$.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

You can try to use localStorage to save scroll position.

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

rude example

Answer 2

If you want ultimate cross-compatibility, use a simple library that obfuscates the underlying mechanism for storage. This way, regardless of what browser the user has and what technologies that browser implements for storage it works! LocalStorage is not supported before IE8, but this isn't a problem for consumers it may be for corporate environments.

http://www.jstorage.info/

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

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

Alternatively, you can use cookies as they are cross-compatible.