Le défilement de l'élément suivant

Solution Simple:

Pour obtenir le prochain conteneur, essayez d'utiliser next().

Fondamentalement, la <div> conteneurs sont des frères et sœurs les uns des autres, afin de l'appelant .next() sur un div conteneur qui va vous donner la prochaine.

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

Vous suffit d'utiliser $(this) pour obtenir le lien de l'objet, .parent() pour obtenir le parent du lien, qui est le <div>, puis .next() pour obtenir le frère suivant (veuillez noter qu'il s'enroule automatiquement, de sorte que le bébé après la dernière <div> est le première <div>!),.offset()to get its position relative to the page,.top` pour le faire par rapport à la bordure supérieure.

Alors il suffit d'utiliser $(document).scrollTop() pour faire défiler jusqu'à l'emplacement.

Pour une solution générale, l'utilisation:

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

Le code utilise essentiellement container.find('~.container, ~:has(.container)') pour trouver toute la fratrie qui a ou est un .container. Si rien n', puis remonter l'arborescence DOM 1 étape.

Après il trouve quelque chose qui est ou a un .container, il l'attrape avec nextdiv = container.nextAll('.container, :has(.container)').first();.

Enfin, si rien n'est trouvé, vérifié par nextdiv.length==0, il suffit de prendre la première .container dans l'ensemble de la page.

Puis faites défiler jusqu'à ce que .container a été attrapé.

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

Pour animer le défilement, la place de la scrollTop propriété dans un animate fonction:

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

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

OriginalL'auteur ronalchn

Ce que vous voulez peut être facilement atteint grâce à parent() et child().

Si le nombre de conteneurs sur chaque page est différente, alors vous devriez commencer ID require (ne sais pas si c'est un terme) les récipients en série. Quelque chose comme, class="container-1"

L'événement de clic sur le dernier bouton doit faire quelque chose comme:

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

Suis sûr que vous pouvez comprendre ce que le bouton suivant devrait le faire 😉

OriginalL'auteur automaticAllDramatic