更改url中的id时页面抖动

Page jerks on changing id in url?

本文关键字：抖动 id url 中的 更改      更新时间：2023-09-26

我有一个页面，每个页面有10个块，每个块占据窗口的高度。我正试图通过在像page.com#1一样向下滚动页面时将块id添加到url来更改url。url更新得很好，但急动了。我如何在没有急动的情况下平稳地转换更改？

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

Jquery

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

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

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

http://url.com/#block-一个

并且在页面加载上有一个脚本，它可以执行以下操作：

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