滚动到下一个元素(Scrolling to the next element)

我有一个jQuery或JavaScript问题所困扰。

它已经得到了恼人的告诉我，我可能会认为这一个太复杂了。

所以我的标记（simplyfied）看起来是这样的：

<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）的容器可能不总是直接兄弟姐妹彼此（见下文标记）

---

问题：

我能得到这个通过给每个容器的唯一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>  

Answer 1:

Simple solution:

To get the next container, try using next().

Basically, the <div> containers are siblings of each other, so calling .next() on one div container will give you the 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
});

http://jsfiddle.net/Pm3cj/1/

You just use $(this) to get the link object, .parent() to get the parent of the link, which is the <div>, then .next() to get the next sibling (note it will wrap automatically, so the sibling after the last <div> is the first <div>!),.offset()to get its position relative to the page,.top` to get it relative to the top border.

Then you just use $(document).scrollTop() to scroll to that location.

---

For a completely general solution, use:

$(".button").on("click", function(e) {
    container = $(this).parent();

    // if I am the last .container in my group...
    while (    document != container[0] // not reached root
            && container.find('~.container, ~:has(.container)').length == 0)
        container = container.parent(); // search siblings of parent instead

    nextdiv = container.nextAll('.container, :has(.container)').first();

    // no next .container found, go back to first container
    if (nextdiv.length==0) nextdiv = $(document).find('.container:first');

    $(document).scrollTop(nextdiv.offset().top);
    // $(this).parent().next() // this is the next div container.
    return false;
});

​The code basically uses container.find('~.container, ~:has(.container)') to find any sibling that has or is a .container. If nothing, then go up the DOM tree 1 step.

After it finds something which is or has a .container, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();.

Lastly, if nothing is found, checked by nextdiv.length==0, just grab the first .container in the whole page.

Then scroll to whatever .container was grabbed.

http://jsfiddle.net/Pm3cj/3/

---

To animate the scroll, place the scrollTop property in an animate function:

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

http://jsfiddle.net/Pm3cj/4/

Answer 2:

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>

Answer 3:

你想要什么可以通过轻松实现parent()和child()

如果容器的每一页上的数量是不同的，那么你就应该开始ID'ing（不知道这是一个术语）的容器连续。 像， class="container-1"

在最后一个按钮的Click事件应该这样做：

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();

相信你可以找出下一个按钮，应该怎么做;）

文章来源: Scrolling to the next element