1

我有 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);
    }
});
4

1 回答 1

1

现场演示

问题 1：

您可能使用类似：<a href="#goto">goto</a>并且您没有阻止浏览器默认行为，这只是通过将事件传递给click处理程序来完成，例如：

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

问题 2

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

offset().top

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

问题 3

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

example.com#bottomLady

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

于 2013-11-03T07:21:47.220 回答