javascript - 重新加载后保存 div 内的滚动位置

Question

我的目标是将滚动位置保存在 div 内，以便重新加载后它将加载到相同的位置。 在我的项目中，我使用 this插件可以通过标题滚动到 div 内的元素。我当前使用此插件的方式是这样的:

$("#wrapper").scrollTo($(".active>.placementWrapper>.placementName[title='" + placementName + "']"));
  var scrollToPos = placementName;
  localStorage.setItem("scrollToPos", scrollToPos);

但是正如您所看到的，我使用元素的标题来获取我需要滚动到的位置，因此当我使用鼠标滚动时，位置不会更新。

这是插件的代码:

$.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); }
    });
  });
}

底线，知道如何保存 #wrapper 内的最后一个位置吗？谢谢

Answer 1

尝试仅使用它来存储:

<div id="test" style="height:460px;"></div>

<script>

localStorage.hval=(document).getElementById("test").style.height;

</script>

要再次获取值，

localStorage.getItem("hval");

您可以将 hval 替换为几乎任何您想要的内容。要检查本地存储，请转到开发工具>资源>本地存储