Question

我已经被困在这几个小时了，似乎无法找到问题。我也有描述问题的问题，因为我不确定问题究竟在哪里。我已经遍布stackoverflow和其他网站找到了解决方案，但到目前为止我还没有......

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

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

似乎很多其他onepage网站都忽略了网址片段而根本没有更新网址，除非导航不在网站的顶部。因此，除非导航位于左侧或右侧，否则您无法直接链接到网站的特定部分。

我的部分代码：

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

从用户的角度来看：

用户：我使用网址和网址片段访问网站。
用户请求： http://example.com/index.html#contact
脚本：脚本接收请求，看到使用的URL片段和计算，然后定义偏移量。更迭！
用户：通过此链接，我打开了联系表单并提交了一些信息。
用户：我想做的下一件事是返回产品视图并使用地址栏进行操作。
用户请求： http://example.com/index.html#products
脚本：哈希更改事件被触发，但没有键盘事件在＆＃39;输入＆＃39;可以被抓住，这导致事件发生的未知来源。也可以通过从一个段到另一个段滚动来更改哈希值。这会导致元素位于固定导航栏下方。由于网站没有刷新，而是从缓存中加载，因此我可以使用无负载或就绪事件来计算和调整偏移量。

Answer 1

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

使用.offset().top
减去固定标题的高度，使用.outerHeight()
使用$(body).scrollTop()立即滚动到所需位置，或.animate()在不到一秒的时间内滚动到那里。

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

1 个答案: