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>容器是彼此的兄弟，所以在一个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
});

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)')来查找具有或是.container的任何兄弟。如果没有，那么就把DOM树上一步。

在找到具有.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/

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（不知道这是一个术语）容器。像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();

我相信你可以弄清楚下一个按钮应该做什么;）

滚动到下一个元素

3 个答案:

简单解决方案：

对于完全通用的解决方案，请使用：