jQuery 平滑滚动到同一页面和其他页面上的 ID：如何设置偏移量？

Question

我在我的页面上使用 jQuery 跳转/滚动到 ID。

这适用于其他带有锚点的页面，如

<a href="other-page.php#jump-id">Jump & Scroll to ID on other page</a>

并且在同一页面上仅使用像

这样的锚点

<a href="#jump-id">Jump / Scroll to ID on the same page</a>

这不是最好的解决方案，因为我必须更改我的导航菜单但它有效（我在页面上加载了另一个带有其他标签的菜单）。

现在我正在寻找一种方法来将 -230px 的 偏移量添加到滚动/跳转脚本中，因为我有一个 固定的 header 在我的页面上。

我认为它很简单，但不幸的是我不是 jQuery 专业人士。我怎样才能做到这一点？请帮助我将 -230 偏移量添加到此函数:)

jQuery代码：

(function($){ var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).attr("href"); }else{ var target = location.hash; } $('html,body').animate( { scrollTop: $(target).offset().top },1000,function() { location.hash = target; }); } $('html, body').hide() $(document).ready(function() { $('a[href^=#]').bind("click", jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show() jump() }, 0); }else{ $('html, body').show() } }); })(jQuery)

Answer 1

负责说明页面将向下滚动多少的是 scrollTop: $(target).offset().top，因此，如果您想偏移 -230px，只需从 $(target).offset().top 中减去 230。

但是，如果您在当前代码中执行此操作，它将不起作用，因为您正在使用 location.hash = target; 更改哈希。当您这样做时，您的浏览器将找到哈希并跳转到它（没有动画，只是跳转）。

观看此演示：http://jsfiddle.net/pcyn2fvk/

如果点击锚点，页面会向下滚动到内容，滚动后会跳转（这是location.hash = target;造成的）。

这是不使用 location.hash = target; 的演示：http://jsfiddle.net/pcyn2fvk/1/

我假设您需要更改哈希，因此，您可以尝试一种不同的方法，例如 Lea Verou (http://lea.verou.me/2011/05/change-url-hash-without-page-jump/) 解释的这种使用历史记录 API 而不是 location.hash.

还有一些其他方法，例如，您可以在单击锚点时删除目标部分（您单击以滚动到的部分）的 ID，然后，当您使用 [=17 更改位置时=], 浏览器不会找到点击的id, 也不会跳转到, 然后, 之后, 你可以重新分配id到你的部分。

希望对您有所帮助！

Answer 2

我发现了另一种使用锚标签的方法。这允许我加载一个不同的页面并滚动到我的带有偏移量的 id。

在 IE 中，滚动在所有页面上都能很好地工作，但所有其他浏览器都不会在 smae 页面上滚动。如果我在我想滚动的页面上单击我的 link，他们会跳转到 hastags 而不会使用我的 jQuery 滚动功能。如果我从另一个 URL 单击相同的 link，则滚动有效。

（其他方法，仅适用于 <a href="page-b.php#anchor">Link on Page A to Page B</a>）

$(document).ready(function() {
    $('html, body').hide();

    if (window.location.hash) {
        setTimeout(function() {
            $('html, body').scrollTop(0).show();
            $('html, body').animate({
                scrollTop: $(window.location.hash).offset().top -230
                }, 1000)
        }, 0);
    }
    else {
        $('html, body').show();
    }
});

jQuery 平滑滚动到同一页面和其他页面上的 ID：如何设置偏移量？

jQuery Smooth Scroll to ID on same and on other page: how to set offset?

javascript

jquery

scroll

offset