javascript - 更改 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 片段引用的元素的偏移量，它也很容易重现。

从用户的 Angular 来看:

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

Answer 1

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

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