javascript - 重新加载网页,同时保存滚动位置并返回到该位置

标签 javascript jquery

我正在使用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); }
    });
  });
}

最佳答案

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

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

粗鲁的例子

关于javascript - 重新加载网页,同时保存滚动位置并返回到该位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34746041/

相关文章:

javascript - JavaScript 字符串中的不间断空格是如何表示的?

javascript - Stripe 实现出现错误无法读取 null 的属性 'addEventListener'

javascript - 使用 Vue.js 在 Bootstrap 模式中自动完成 Google map

javascript - 动态添加时 onclick 事件不起作用

如果 *any* 属性匹配,JQuery 选择元素

javascript - 单击带有文本的 anchor 标记

php - 使用 AJAX、PHP 和 MySQL 在日期之间进行过滤

javascript - 在 SharePoint CSOM 中关闭 showWaitScreenWithNoClose

javascript - 无法使用括号中的变量从 JavaScript 数组获取值

javascript - SAPUI5/OpenUI5 : More than one app in a portal