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 作为滚动效果的目标来实现这一点。

问题在于它很快就会变得混乱。

我不能以某种方式定位“类的下一个对象：容器”，然后滚动到那个吗？

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

3 回答 3

6

简单的解决方案：

要获取下一个容器，请尝试使用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)')查找任何具有或是.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/

于 2012-09-08T07:46:24.443 回答
-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>
于 2012-09-08T07:51:54.130 回答
-2

您想要的可以通过parent()和轻松实现child()。

如果每个页面上的容器数量不同，那么您应该依次开始 ID'ing（不知道这是不是一个术语）容器。就像是，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();

相信您可以弄清楚下一个按钮应该做什么；）

于 2012-09-08T07:59:22.993 回答