Scrollen Sie auf einer Liste, indem Sie auf eine Schaltfläche klicken

Question

Ich würde gerne in der Lage sein, auf einer Liste zu scrollen, indem ich auf einen Button klicke.

Ich benutze dieses JSFiddle hier

aber das scrollt die gesamte Seite nach unten. Ich möchte stattdessen gerne eine Liste scrollen lassen, ich habe damit begonnen hier, aber es funktioniert nicht. Danke!

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           ...
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

$(document).ready(function() {
    $('#scroll').click(function() {
        $('html, body').animate({
            scrollTop: '+=400'
        }, 1000);
    });
});

Answer 1

Die Liste wird nicht scrollen, weil die Liste bereits bei 100% ist. Um zu scrollen, muss sie in einen separaten Container (die div) gestellt werden, eine Höhe dafür festlegen und dann die div und nicht die Liste oder das HTML scrollen.

Hier ist das Beispiel

http://jsfiddle.net/TN4wP/38/

Ich habe etwas CSS für die div hinzugefügt

#scroll {
    position: fixed;
    padding: 5px 10px;
}
.box{
height: 200px;
    overflow: auto;
}

und ich habe die Animation geändert, damit sie nur auf die div funktioniert

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});

Das sollte dich in Gang bringen