gpt4 book ai didi

javascript - jQuery 滚动问题与scrollTop

转载 作者:行者123 更新时间:2023-11-28 01:50:29 26 4
gpt4 key购买 nike

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

在我提问之前,下面是我遇到问题的 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);
}
});

最佳答案

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

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

关于javascript - jQuery 滚动问题与scrollTop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19750702/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com