Javascript 滚动到下一个元素

我正在努力解决jquery或javascript问题

这已经让我很恼火了，这让我觉得这件事太复杂了

因此我的标记（简化）如下所示：

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

我的内容
我的内容
我的内容
我的内容

基本上只是一些容器

每一个都包含不同的内容和一个按钮

---

计划：

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

1） 单击按钮后，窗口应向下滚动到下一个容器

2） 最后一个按钮再次滚动到第一个容器。所以我需要一个循环

3） 容器的编号可能会因页面而异

编辑：4）容器可能并不总是彼此直接同级（请参见下面的标记）

---

问题：

<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>


<div class="container">
    My Content
<a href="#" class="button">scroll down</a>
</div>

我可以通过给每个容器一个唯一的ID作为滚动效果的目标来实现这一点

问题是它很快就会变得一团糟

我能不能以某种方式将“下一个类对象：容器”作为目标，并滚动到该对象

---

我不确定js或jquery是否是正确的方法。我在这两方面的知识都有点有限

如果能朝着正确的方向努力，我将不胜感激。

---

编辑：容器可能并不总是彼此直接同级

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>
</div>        

        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>

<div class="row">
        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>


        <div class="container">
            My Content
        <a href="#" class="button">scroll down</a>
        </div>
</div>  

我的内容
我的内容
我的内容
我的内容
我的内容
我的内容

简单解决方案： 要获取下一个容器，请尝试使用

基本上，

容器是彼此的兄弟，因此在一个div容器上调用

.next（）

将得到下一个

$(".button").on("click", function(e) {
    $(document).scrollTop($(this).parent().next().offset().top);
    // $(this).parent().next() // this is the next div container.
    return false; // prevent anchor
});

您只需使用

$（this）

来获取链接对象，

.parent（）

来获取链接的父对象，即

，然后

.next（）

来获取下一个同级对象（请注意，它将自动换行，因此最后一个

之后的同级对象是第一个

！），

.offset（）

获取其相对于页面的位置，

.top`获取其相对于上边框的位置

然后您只需使用

$（document）.scrollTop（）

滚动到该位置

---

对于完全通用的解决方案，请使用： ​代码基本上使用

container.find（'~.container，~:has（.container））

来查找任何具有或是

.container

的同级。如果没有，则执行DOM树1步骤

在它找到某个是或具有

.container

的对象后，它会使用

nextdiv=container.nextAll（'.container，：has（.container））.first（）抓取该对象

最后，如果没有找到任何内容，通过
nextdiv.length==0
检查，只需抓取整个页面中的第一个
.container

然后滚动到抓取的任何
。容器



要设置滚动动画，请将
scrollTop
属性置于
animate
函数中：

// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling

此操作不需要JavaScript。您可以使用HTML锚

<div class="container" id="first">
    My Content
<a href="#second" class="button">scroll down</a>
</div>


<div class="container" id="second">
    My Content
<a href="#third" class="button">scroll down</a>
</div>


<div class="container" id="third">
    My Content
<a href="#fourth" class="button">scroll down</a>
</div>


<div class="container" id="fourth">
    My Content
<a href="#first" class="button">scroll down</a>
</div>


我的内容
我的内容
我的内容
我的内容
通过
parent（）
和
child（）
可以轻松实现您想要的

如果每个页面上的容器数量不同，那么您应该开始连续标识（不知道这是否是一个术语）容器。类似于，
class=“container-1”

最后一个按钮上的单击事件应执行以下操作：

var num = $('div[class^="container-"]').filter(function() {
    return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();

我确信您可以确定“下一步”按钮应该做什么；）
 我可以通过给每个容器一个唯一的ID作为滚动效果的目标来实现这一点。问题是它很快就会变得一团糟。嗨，ronalchn，谢谢你的回答。有趣的方法。不幸的是，恐怕我在这里过于简化了我的标记，因为容器并不总是彼此直接的兄弟。我已经相应地更新了这个问题。很抱歉给您添麻烦，我只是不知道这可能会引起问题。非常感谢你的努力！添加了通用解决方案（添加了3条语句）-它甚至比您添加到解决方案中的结构更通用，可用于任何页面结构！嘿，ronalch，哇！太棒了，谢谢你的帮助。我明天会实施它，但看起来它工作得很好。如果你没有滚动动画，那就有点混乱了。我曾考虑过使用.animate（）来实现此目的，但我不确定在不打乱脚本的情况下将其放在何处。可能吗？非常感谢！非常令人印象深刻！只需修改滚动行，并将属性放入
animate
函数，如上所示。嗨，ronalchn！工作绝对完美！绝对令人印象深刻！非常感谢你！！！哦，我真的很欣赏“//评论”。对我的理解帮助很大。出于好奇：你花了多长时间才学会这些？