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 的方法，因为我的页面上有一个固定标题。

我认为这很简单但不幸的是我不是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，只需从230中减去$(target).offset().top。

但是，如果你在当前代码中执行此操作，它将无效，因为您正在使用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解释的方法。 / p>

还有一些其他方法，例如，当您单击锚点时，可以删除目标部分的ID（您单击要滚动到的部分的ID），然后，当您使用location.hash更改位置时，浏览器将找不到点击的ID，并且不会跳转到它，之后，您可以将ID重新分配给您的部分。

希望它有所帮助！

Answer 2

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

在IE浏览器中，滚动条适用于所有页面，但所有其他浏览器不会在smae页面上滚动。如果我单击页面上的链接，我想滚动它们跳转到hastags并且不使用我的jQuery滚动功能。如果我从其他网址点击相同的链接，滚动就会起作用。

（其他方法，仅适用于<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 Smooth滚动到同一页面和其他页面上的ID：如何设置偏移量？

2 个答案: