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/以下是最终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期

您使用的HTMLelement position只是元素相对于其定位的父元素的被动位置。这意味着元素可以具有ie 30的位置，即使它位于页面的底部。
要解决这个问题

offset().top

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

问题3

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

example.com＃bottomLady

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

使用scrollTop的jQuery滚动问题

1 个答案: