javascript - 更改 URL 中断滚动

Question

我想将 url 更改为当前滚动到的部分 ID 的 url。然而，我下面的代码只是破坏了滚动(它根本不滚动)。

$(document).scroll(function() {
  $('section').each(function(){
    if ($(this).offset().top) {
      window.location.hash = $(this).attr('id');
    }
  });
});

<section id="a"></section>
<br><br><br><br><br><br><br>
<section id="b"></section>
<br><br><br><br><br><br><br>
<section id="c"></section>
<br><br><br><br><br><br><br>
<section id="d"></section>

如有任何帮助，我们将不胜感激。

非常感谢。

Answer 1

此行为除第一个以外的所有 section 返回 true:

if ($(this).offset().top)

相反，您可以将每个 section 的偏移量与窗口的滚动位置进行比较:

if($(this).offset().top < $(window).scrollTop())

此行重新加载页面，始终滚动到最后一个 section(基于您当前的 if):

window.location.hash = $(this).attr('id');

这就是滚动出现问题的原因。

如果您想在不重新加载页面的情况下更改 URL，请使用 history.pushState() .

完整代码:

$(document).scroll(function() {
  $('section').each(function() {
    if($(this).offset().top < $(window).scrollTop()) {
      history.pushState({}, '', '#'+$(this).attr('id'));
    }
  });
});