javascript - 页面在更改 url 中的 id 时出现抖动？

Question

我的页面有 10 个 block ，每个 block 占窗口的高度。我正在尝试通过在像 page.com#one 这样向下滚动页面时将 block ID 添加到 url 来更改 url。 url 更新正常，但试图获取 id 时会出现问题。如何顺利过渡变更而不出现卡顿？

    <div class="block" id="one">
        <p>....</p>
    </div>
    <div class="block" id="two">
        <p>....</p>
    </div>

查询

    $('.block').each(function(){
        if (
            $(this).offset().top < window.pageYOffset + 10
            && $(this).offset().top + $(this).height() > window.pageYOffset + 10
          ){
             window.location.hash = $(this).attr('id');
           }
     });

Answer 1

这是因为通过设置 window.location.hash 的值，您告诉浏览器以物理方式跳转到页面中的那个元素。

您尝试模拟的页面很可能不使用真实 ID，而是使用占位符 ID，例如:

http://url.com/#block-one

并且在页面加载时有一个脚本，它执行如下操作:

$(function() {
    if(window.location.hash.substring(0, 7) === "#block-") {
       // Scroll to block whatever...
    }
});