JQuery - ScrollTo Element

JQuery - ScrollTo Element

Oftmals möchte man zu einem Bestimmten Element scrollen, z.B. nachdem der Anwender ein Formular ausgefüllt hat und Validierungsfehler nach einem neuladen der Seite aufgetreten sind. Nun ist es sinnvoll, die Seite wieder direkt zum Formular zu scrollen.
Dies lässt sich mit JQuery relativ einfach bewerkstelligen, dabei könnt ihr entweder auf die animierte Variante zurückgreifen oder einen direkten Sprung machen.

Direkt zu einem Element scrollen:
$('html,body').scrollTop($('#any-id').offset().top);
Dieses Code-Beispiel ermittelt das html oder body Element und ruft darauf die scrollTop Funktion auf.
Die scrollTop Funktion erwartet lediglich eine Position in Pixel ausgehend von der oberen Position des übergeordneten Elements.

Im folgenden Code-Beispiel wird ebenfalls zu einem bestimmten Element gescrollt. Jedoch wird hierbei die animate Funktion mit einem delay aufgerufen, was dafür sorgt, dass nicht direkt, sondern mit einer sichtbaren Verzögerung gescrollt wird.
$('html,body').animate(
{
scrollTop: $('#any-id').offset().top
}, delay);

Im folgenden Code-Beispiel möchte ich euch noch eine selbst geschriebene Funktion zeigen.
Diese erwartet ein Element sowie ein delay. Sollte der über delay übergebene Wert positiv sein, so wird ein animiertes scrolling durchgeführt. Andernfalls wird ein direkter Sprung gemacht.
Sollten mehrere Elemente übergeben werden, so wird automatisch zum letzten Element gescrollt.
function ScrollTo(element, delay) {
var $element = $(element);
if ($element.length > 0) {
if ($element.length > 1) {
$element = $element.last();
}

var top = $element.offset().top;

if (delay > 0) {
$('html,body').animate({ scrollTop: top }, delay);
} else {
$('html,body').scrollTop(top);
}
}
}

Beispiel:
ScrollTo('.comment', 0)
Um einen Kommentar zu hinterlassen, ist eine Anmeldung erforderlich.