Javascript 带偏移量的散列位置

我在单页设计的导航上遇到了一些问题。下面是我的代码。代码在主页上运行良好

固定标题将不会重叠的部分，它的作品伟大。但是当我在网站的一个页面上，点击一个菜单项链接到主页上的一个部分，如

，滚动动画将动画显示到该部分，但是固定标题与该部分重叠，当你等待3秒钟时，它将返回到正确的位置

我认为动画将执行2次，但我现在不知道这是否是问题所在。我还想知道如何编码，当用户刷新页面时，它会返回到浏览器窗口的顶部

JS小提琴：

---

由于您在选择器中同时选择了

html

和

body

，因此动画将在支持对这两个元素进行动画制作的浏览器上执行两次。为了防止这种行为，需要在任一动画完成后停止动画制作。要做到这一点，您可以使用，如下所示：

$('html, body').stop(true, true).animate({ scrollTop: target }, 500, function () {
    window.location.hash = id;
});

---

编辑：结合我的答案和奥斯卡的答案，我得到了一些似乎有效的东西，在URL的尖锐部分之前添加刘海

---

您的问题是动画的完整处理程序。您可以这样做：

window.location.hash = id;

此方法将滚动条移动到id为“id”的对象，但当然，这会忽略用于计算的偏移量（页眉高度），这就是固定页眉与剖面重叠的原因

我建议您使用假ID，类似这样：

window.location.hash = '!' + id;

然后，当你加载页面时

gotoByScroll(windwo.location.hash.substr(2);

这样，页面中就没有具有该id的元素，也没有第二个滚动条

---

希望这能起作用。

先保存当前滚动位置，然后更改哈希，然后应用保存的滚动位置，然后应用动画

var target = $(id).offset().top - offset,
    scrollmem = $('html, body').scrollTop();

window.location.hash = id;
$('html, body').scrollTop(scrollmem).animate({ scrollTop: target    }, 500, function () {
  // nothing here
});

如果使用插件不是问题，请使用jQuery ScrollTo插件：

---

另外，如果您已经在使用

event.preventDefault（）

，则不需要使用

returnfalse为防止“”标记的默认单击行为，我已制定了另一个解决方案

// The id of the section we want to go to.
var id = $(this).attr("href"),
    $id = $(id),
    dataID = id.substr(1);

// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;

    $id.attr('data-id',dataID).attr('id','');
    window.location.hash = id;
    $id.attr('id',dataID);

    $('html,body').animate({scrollTop: target},500);


这样做的目的是在更改哈希之前删除目标元素上的“id”（传递到
数据id
属性），以防止跳转（因为在文档中找不到），然后在更改后将其添加回。如果您只需要id以节为目标，则可以为其指定与哈希标记不同的名称（确保页面中不存在hashtags）

HTML:

您可以通过截取
onhashchange
事件并调整
窗口的偏移量来完成此操作：

(function($){
    if ( "onhashchange" in window ) {
        var hashHandler = function(){
            var hash = window.location.hash.substring( 1 );
            if ( !hash )
                return;

            var offset = 50;
            var sel = '[id="' + hash + '"], a[name="' + hash + '"]';
            var currentOffset = $( sel ).offset().top;

            $( window ).scrollTop( currentOffset + offset );
        };
        window.addEventListener("hashchange", hashHandler, false);
        window.addEventListener("load", hashHandler, false);
    }
})(window.jQuery);

感谢您的快速回答。但不幸的是，它的工作原理与以前一样。首先，它会返回到位置，就像没有固定标题一样，然后在3秒钟后返回，以便固定标题正确定位。谢谢，我们就快到了。当我单击视频时，他会转到相应的部分（视频）。如果我刷新，它看起来就不再奇怪了。但是当我在另一个页面上单击视频菜单（
index.html#video
）时，不包括固定标题。这并没有解决问题：（正如我之前所说，当打开single.html并单击节视频时，固定标题将覆盖视频节。3秒钟后，它将到达正确的位置。这项工作，只需更改
var id=$（this）.attr（“href”）.substr（1）；
和
var target=$（“#”+id）.offset（）.top-offset；
然后当你链接你的页面时，像这样做：
index.html#！video
@MamaWalter不适合我：（如果我在我的代码中跳过了你的代码，从
single.html
转到
index.html#video
，标题与部分重叠。谢谢，但这对我也不起作用。它也会起作用。JSFIDDLE:它起作用。JSFIDDLE中有语法错误。我已经更新了它：也许我解释得不完全正确。因为代码基本正确ly的工作原理很简单。这会转到正确的部分，只有当您在视频上并且浏览器实例刷新时，您才会看到第一个头不正确，然后在3秒钟后调用。后一个仍然是这样。好的，抱歉。我会尝试解释。我的JSFIDLE中的代码可以工作。它会转到正确的部分并正确定位它，所以固定标题不会覆盖该节。好吗？但当我刷新页面时，它的位置不正确。现在它正在使用@joelrobichaud的更新，只有当我在外部链接上时才会返回，它的位置将不正确。@Dab1121，我不知道为什么。我不会对你的答案投反对票。你的代码也在工作。只有在单击后单个页面上的节链接不起作用。在浏览器兼容性方面，代码中有一些怪癖。我使用了jQuery ScrollTo插件来实现这一点，它非常神奇。我已经更新了我的解决方案：因为Chrome不计算scrollTop（）正确地说。我已经跳过了你在我的代码，但是当我在一个页面上，例如在视频上单击时，它将首先重叠，然后它将转到正确的位置。我还想知道，当用户刷新页面时，它将转到浏览器的顶部，我如何修复它？@dan1121我认为计算中有错误。对我来说在我将计算更改为
currentcoffset-offset
（将
+
更改为
-
）之后，它工作了。
var id = $(this).attr("href").substr(1);

var target = $("#section-"+id).offset().top - offset; 

(function($){
    if ( "onhashchange" in window ) {
        var hashHandler = function(){
            var hash = window.location.hash.substring( 1 );
            if ( !hash )
                return;

            var offset = 50;
            var sel = '[id="' + hash + '"], a[name="' + hash + '"]';
            var currentOffset = $( sel ).offset().top;

            $( window ).scrollTop( currentOffset + offset );
        };
        window.addEventListener("hashchange", hashHandler, false);
        window.addEventListener("load", hashHandler, false);
    }
})(window.jQuery);