jQuery scrollTop in Container auf Klick funktioniert nur einmal

Question

Ich versuche, einen Content-Slider von Art mit der einfachsten jQuery möglich, ohne ein Plugin und ohne Zuweisung von IDs zu jedem div.

Ich habe eine feste Position #container das ist 100% Breite und 45% Höhe der Seite und enthält 5 Divs namens .sect. Alle 5 .sect sind 100% Breite des Containers und sind auch 45% Höhe der Seite, was bedeutet, dass 1 .sect würde den sichtbaren Teil von füllen, wenn gescrollt zu.

ein div #down außerhalb sollte, auf klicken, machen Sie die Scroll zu jedem der. sect s. das ist meine jQuery dafür. Ich setze den Wert von scrollTop auf die Höhe von .sect, so dass #container die genaue Höhe jeder Sekte jedes Mal scrollt, wenn es angeklickt wird.

$('#down').on('click', function(e) { 
    e.preventDefault(); 
    $('#container').animate({ scrollTop:$('.sect').height() }) 
}); 

das erste Mal #down ist, angeklickt #container blättert von der ersten .sect in Hinblick auf den zweiten .sect ohne Probleme, aber danach, hat #down nichts mehr tun. jsfiddle - die HTML und CSS sind nicht bemerkenswert, denke ich. Ich bin neu bei jQuery, also bitte erkläre, was ich vermisse!

Answer 1

Ich glaube, Sie fehlen, dass der Behälter Scrolling halten sollte, je nachdem, wie viel von Scroll es getan hat, den Code nur nach unten scrollt bis zur Höhe von 1 .sect es sein sollte:

scrollTop: gescrollt +

Höhe

scrollTop: $("#container").scrollTop() + $(".sect").height();