Question

我正在使用一个函数来存储我希望页面在点击时重新加载的位置，函数工作正常，但我想动画滚动。

;(function($){

/**
 * Store scroll position for and set it after reload
 *
 * @return {boolean} [loacalStorage is available]
 */
$.fn.scrollPosReload = function(){
    if (localStorage) {
        var posReader = localStorage["posStorage"];
        if (posReader) {
            $(window).scrollTop(posReader);
            localStorage.removeItem("posStorage");
        }
        $(this).click(function(e) {
            localStorage["posStorage"] = $(window).scrollTop();
        });

        return true;
    }

    return false;
}

/* ================================================== */

$(document).ready(function() {
    // Trigger the reload
    $('#edit').scrollPosReload();
});

}(jQuery));

任何想法......

Answer 1

您可以animate() scrollTop属性。唯一的问题是window对象没有scrollTop属性，只有元素节点拥有它。 jQuery scrollTop()方法有额外的实现可以在window和document上工作。

因此，为了以动画方式滚动页面，通常使用此代码

$('html, body').animate({scrollTop: posReader});

（由于某些浏览器不一致，选择器包含html和body元素（没有检查问题是否仍然存在）。）

此外，localStorage存储并检索数据作为字符串，因此将读取值转换为数字是一个好主意，尽管经常它不会使jQuery的区别。

完整代码：

;(function($) {

  /**
   * Store scroll position for and set it after reload
   *
   * @return {boolean} [loacalStorage is available]
   */
  $.fn.scrollPosReload = function() {
    if (window.localStorage) {
      var posReader = localStorage["posStorage"];

      if (posReader) {
        $('html, body').animate({
          scrollTop: +posReader
        });
        localStorage.removeItem("posStorage");
      }

      $(this).click(function(e) {
        localStorage["posStorage"] = $(window).scrollTop();
      });

      return true;
    }

    return false;
  }

  /* ================================================== */

  $(document).ready(function() {
    // Trigger the reload
    $('#edit').scrollPosReload();
  });

}(jQuery));

JSFiddle example

如何使用动画为scrollTop函数设置动画

1 个答案: