Question

使用 scrollify.js 最新版本进行页面滚动效果，updateHash和sectionName设置为false。

我的问题是，帖子页面刷新焦点位于我离开的同一部分。例如，让我说在第4节，当我按 F5 页面刷新并降落在相同的第4部分而不是降落在第1部分。甚至 Ctrl + F5 在Chrome浏览器中没有帮助。这是我的代码。

$('body').css('overflow', 'hidden');
$.scrollify({
  section: ".scroll-section",
  sectionName: false,
  interstitialSection: "",
  easing: "easeOutExpo",
  scrollSpeed: 1100,
  offset: 0,
  scrollbars: true,
  standardScrollElements: "",
  setHeights: true,
  overflowScroll: true,
  updateHash: false,
  touchScroll: true,
  before: function(index, section) {
    var className = '.' + $.scrollify.current().data('section');
    $('.sticky-left-nav').find('li').removeClass('active mb30');
    $('.sticky-left-nav').find(className).addClass('active mb30');

    if (index > 3) {
      $('body').removeAttr('style');
    } else {
      $('body').css('overflow', 'hidden');
    }
  },
  after: function() {},
  afterResize: function() {},
  afterRender: function() {}
});

任何帮助表示赞赏。提前谢谢。

Answer 1

它与插件无关。当页面offsetTop设置好后，重新加载浏览器后滚动到最后一个位置。您可以看到它here

您可以通过在加载页面时将页面滚动回顶部来解决此问题。

$(window).on('load', function() {
  setTimeout(function() {
      $(window).scrollTop(0);
  });
});

现场演示here。

我不确定为什么我们需要setTimeout，但这是它的唯一运作方式。

Answer 2

我通过结合位置更改加载以及滚动到窗口顶部来解决此问题。

    $(window).on('load', function() {
  location.href = 'http://localhost:3000/#1';
  setTimeout(function() {
      $(window).scrollTop(0);
      $.scrollify.update();
  });
});

您将不得不根据实际情况调整location.href，并将updateHash设置为true，以便浏览器知道要加载的哈希值

Scrollify - 页面刷新仍然是相同的部分

2 个答案: