javascript - jQuery 滚动问题与scrollTop

Question

我在滚动方面遇到了两个问题，我认为在一篇文章中问这两个问题会更容易。

在我提问之前，下面是我遇到问题的 jQuery 代码。

$("a").click(function() {
    if(this.hash){
        $("#main").animate({
            scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
        },2000,"easeOutExpo");
    }
});

情况:我的页面中发生的基本上是一个带有几个列表的侧面菜单。每个列表中的每个项目都链接到我的主 div 部分或我的“内容”部分中的 anchor 。单击列表项时，上面的代码将运行并滚动到 anchor 之一。

问题 1:当我单击其中一个列表中的某个项目时，它会向下滚动到一个 anchor ，该 anchor 工作得很好。但是，当再次单击同一项目时，主区域会滚动回到 div 的顶部。我解决这个问题的想法是检查 div 的当前“滚动到”位置，然后如果位置自第一次单击后没有更改，则不允许代码再次运行，但我无法让它工作。关于如何解决此问题有什么建议吗？

问题 2:如上所述，当我单击列表中的某个项目时，它会向下滚动到 anchor 。然后我想要能够的是单击不同的列表项并将其滚动到该位置。问题是，当我单击不同的列表项时，它会滚动到主 div 中的某个随机位置，我什至还没有锚定的位置。谁能解释一下我该如何做到这一点，以便我可以从一个 anchor 滚动到另一个 anchor ？

注意:请在您的解释上方注明问题 1 或问题 2 进行回复，以便我知道您指的是哪一个。谢谢

编辑:感谢 Roko 的帮助，我让它工作了。对于 future 的观众，这里是一个工作演示的 fiddle :http://jsfiddle.net/TsUcc/3/下面是最终的 jquery 代码的样子

$("a").click(function( e ) {
    e.preventDefault();

    if(this.hash){

        var target = '#'+ this.hash.substr(1);
        var destination = $(target).offset().top - 10;

        $('#main').stop().animate({
            scrollTop : '+=' + destination
        }, 1000);
    }
});

Answer 1

LIVE DEMO

问题 1:

您可能使用类似:<a href="#goto">goto</a>并且您没有阻止浏览器的默认行为，该行为只需将事件传递到 click 即可完成。处理程序如:

$("a").click(function( e ) {
     e.preventDefault();
     // .....
});

问题 2

HTML 元素 position您使用的只是元素相对于其定位的父元素的被动位置。 这意味着一个元素可以有一个位置，即: 30即使它位于页面底部。
要修复该问题，请使用

offset().top

_{也值得一读:https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect}

问题 3

H3元素不应该有 name属性。
使用 ID为此目的。
为什么？
如果您有一个不错的网页，并且页面底部有一些性感的东西，我可以通过引用您的网页和 ID 向我的 friend 发送链接。在类似的链接中:

example.com#bottomLady

他会立即了解我的想法，而无需一直向下滚动页面。