滚动到下一个元素。

Question

滚动到下一个元素。

3

我正在苦恼一个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作为滚动效果的目标来使其工作。

问题在于它很快变得太乱了。

我能不能只是以某种方式针对“具有class：container的下一个对象”，并滚动到那里？

我不确定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>

- Arrowcatch

3个回答

-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>

- Rusty Jeans

我可以通过为每个容器分配唯一的ID作为滚动效果的目标来使其工作。但问题在于这样很快就会变得太混乱了。 - Ram

-2

通过使用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();

我相信你可以想出下一个按钮应该做什么 ;)

- automaticAllDramatic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ronalchn · Accepted Answer

简单解决方案：

要获取下一个容器，请尝试使用 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()获取它相对于页面的位置，.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树上移动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/