gpt4 book ai didi

javascript - 使用带有 Prev 和 Next 图标的 Jquery 滚动到下一个 Div

转载 作者:太空宇宙 更新时间:2023-11-04 11:55:36 24 4
gpt4 key购买 nike

我正在将 Jquery 与 HTML 结合使用,并尝试使用动画滚动到下一个 Div。可悲的是,没有什么能帮助我。我想要一个左下角的图标,它将滚动到下一个 div。这是我的基本 div

 <body>

<div id="scroller"><a class="display" href="#">Link </a></div>

<div class="menu-wrap"></div>
<div id="section1" class="section current"></div>
<div id="section2" class="section"> </div>
<div id="section3" class="section"> </div>
<div id="section4" class="section"></div>
<div id="section5" class="section"></div>
<div id="section6" class="section"></div>
<div id="section7" class="section"></div>
<div id="section8" class="section"></div>
<div id="footer"></div>
</div>

我想在“部分”之间滚动。我在每个内部都有其他 Divs,但 ID 不同。我不认为这应该是一个问题?似乎没有任何效果,我的 jQUery 是

    $(document).ready(function(){
$('a.display').on('click', function(e) {
e.preventDefault();
var offset = $(this).next().find('div#section').offset().top;
$('html, body').stop().animate({ scrollTop: offset }, 400);
});
});

最佳答案

您的代码没有按您的想法行事。

首先,$(this).next() 不返回任何元素。如果是这样的话,您应该使用 .find('div.section') 而不是 .find('div#section')。此外,对于“滚动到下一个”功能,您能够以某种方式知道当前滚动位置并将其与
期待下一个。

考虑到这一点,我建议使用 jquery-scrollTo 插件而不是发明自己的实现。

这是一个用法示例:JSFiddle

关于javascript - 使用带有 Prev 和 Next 图标的 Jquery 滚动到下一个 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30279789/

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