使用scrollTop的jQuery滚动问题
我有2个滚动问题,我认为在一个post中询问它们会更容易。
在我问之前,下面是我的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); } });
现场演示
问题1:
您可能会使用以下内容: goto
并且您没有阻止浏览器默认行为,只需将事件传递给click
处理程序即可:
$("a").click(function( e ) { e.preventDefault(); // ..... });
问题2
您正在使用的HTMLelement position
只是元素相对于其定位的父元素的被动位置。 这意味着元素的位置即为: 30
即使它位于页面底部。
解决这个问题
offset().top
另外值得一读: https : //developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
问题3
H3
元素不应该具有name
属性。
为此目的使用ID
。
为什么?
如果你有一个漂亮的网站,并且你的页面底部有一些性感的东西,我可以通过引用你的网页和ID
在以下链接中发送一个链接给我的朋友:
example.com#bottomLady
并且他会立即得到我的想法而无需将页面一直向下滚动。