更改 URL 片段后操纵浏览器行为

Question

我已经在这个问题上停留了几个小时，似乎找不到问题所在。我在描述问题时也遇到了问题，因为我不确定问题到底出在哪里。我已经查看了 stackoverflow 和其他网站以找到解决方案，但到目前为止我还没有..

我正在尝试使用 jQuery 构建一个单页滚动条。我的问题基本上归结为这个。每当我查看我的页面并通过在地址栏中键入页面上另一个元素的 ID 来操作 URL 片段时，它都会导航到具有该 ID 的元素。但由于我在页面顶部使用了固定导航栏，因此它会在固定元素下方显示部分元素。

有没有办法通过操作地址栏来捕获 keydown/keyup 事件，以便我可以确保该段显示在正确的偏移量处？有没有办法在更改 URL 片段后创建默认偏移量？我已经在窗口对象上尝试了事件“hashchange”，但是当我将 location.href.hash 值更新为用户正在查看的任何段时，它也会触发。我在我的 body 元素上有一个默认的顶部偏移，以使初始加载与固定元素一起工作。

似乎很多其他单页网站忽略了 URL 片段并且根本不更新 url，除非导航不在网站顶部。因此，您将无法直接链接到网站的特定部分，除非导航位于左侧或右侧。

我的部分代码：

$(window).load(function(){

var segment = window.location.hash;
if(segment != ""){
    if($(segment) != []){
        var originOfSegment = $(segment).offset().top - 64;
        $("body, html").animate({"scrollTop": originOfSegment + "px"}, 0);
    }
}

$("a[href*='#']").on("click", function(e){

    if(e.preventDefault){
        e.preventDefault();
    }
    else{
        e.returnValue = false;
    }

    var segment = this.hash;

    //navigateTo(segment, 500);

    window.location.hash = segment;

});

$(window).on("scroll", function(){
    var idOfSegment = $(currentSegment).attr("id");
    window.location.hash = idOfSegment;
});

});

我可能不是第一个遇到这个问题的人，但我似乎找不到这个特定问题的答案。

即使不使用 JavaScript 初始计算和设置 URL 片段引用的元素的偏移量，它也很容易重现。

从用户的角度：

• 用户：我使用 url 和 url 片段访问网站。
• 用户请求： http://example.com/index.html#contact
• 脚本： 脚本接收请求，看到一个 URL 片段被使用并且 计算，然后定义偏移量。成功了！
• 用户：我通过这个链接打开了联系表格并提交了一些信息。
• 用户：接下来我要做的是返回产品概览并使用地址栏。
• 用户请求： http://example.com/index.html#products
• 脚本： hashchange 事件被触发，但无法捕获 'enter' 上的 keyup-event， 这导致事件发生的来源不明。哈希值也可以通过从一个片段滚动到另一个片段来改变。这会导致一个元素位于固定导航栏下方。由于网站没有刷新，而是从缓存中加载，因此没有可用于计算和调整偏移量的 load 或 ready 事件。

Answer 1

您可以使用 JavaScript 的 window.scrollTo() 或 jQuery 的 .scrollTop() 滚动到特定位置。一般逻辑是：

1. 使用.offset().top定位所需ID的位置
2. 减去固定头的高度，使用.outerHeight() 计算
3. 使用$(body).scrollTop() 立即滚动到所需位置，或使用.animate() 在几分之一秒内滚动到那里。