滚动到下一个元素

Question

我正在努力解决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>

基本上只是一些容器.

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

---

计划:

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

简单方案:

要获取下一个容器,请尝试使用next().

基本上,<div>容器是彼此的兄弟姐妹,因此调用.next()一个div容器将为您提供下一个容器.

$(".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/

你只是$(this)用来获取链接对象,获取链接.parent()的父级<div>,然后.next()获取下一个兄弟(注意它会自动换行,所以最后一个兄弟<div>是第一个 <div>!), .offset().to get its position relative to the page,top`相对于顶部边界得到它.

然后你只需用$(document).scrollTop()它滚动到那个位置.

对于完全通用的解决方案,请使用:

$(".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;
});

该代码主要用于container.find('~.container, ~:has(.container)')查找具有或者是a的兄弟.container.如果没有,那么继续前进DOM树1步.

在找到具有或具有的东西后.container,它会抓住它nextdiv = container.nextAll('.container, :has(.container)').first();.

最后,如果找不到任何内容,请检查nextdiv.length==0,只需抓住.container整个页面中的第一个.

然后滚动到.container抓取的任何内容.

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

要为滚动设置动画,请将scrollTop属性放在animate函数中:

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

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