scrollTop 的 jQuery 滚动问题

Question

我有 2 个滚动问题，我认为在一篇文章中同时询问它们会更容易。

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

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

情况：我在我的页面中所做的基本上是我有一个带有几个列表的侧菜单。每个列表中的每个项目都链接到我的主 div 部分或我的“内容”部分中的锚点。单击列表项时，上面的代码会运行并滚动到其中一个锚点。

问题 1：当我单击其中一个列表中的一个项目时，它会向下滚动到一个可以正常工作的锚点。但是当再次单击同一个项目时，主区域会向上滚动到 div 的顶部。我解决这个问题的想法是检查 div 的当前“滚动到”位置，然后如果该位置自第一次单击后没有更改但我无法使其工作，则不允许代码再次运行。有关如何解决此问题的任何建议？

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

注意：请在您的解释上方添加问题 1 或问题 2，以便我知道您指的是哪一个。谢谢

编辑：感谢 Roko 的帮助，我得到了它的工作。对于未来的观众，这里是一个工作演示的小提琴：http://jsfiddle.net/TsUcc/3/ 以下是 finally 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 只是元素相对于其定位的父元素的被动位置。 这意味着元素的位置可以是 ie: 30，即使它位于页面底部。
解决这个问题

offset().top

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

第 3 期

H3 元素不应该具有name 属性。
为此目的使用ID。
为什么？
如果您有一个不错的网络，并且您的页面底部有一些性感的东西，我可以通过引用您的网页和链接中的ID 将链接发送给我的朋友：

example.com#bottomLady

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