Ein Element in den sichtbaren Bereich scrollen
Problem
Sie wollen das Dokument oder ein Element so scrollen, dass ein anderes Element sichtbar wird.
Lösung: Scrollen des gesamten Fensters
Wenn Sie das gesamte Fenster scrollen müssen,
können Sie die Methode offset nutzen,
um die Position
des Ziel-Elements relativ zum Dokument zu bestimmen und dann mit
der Methode scrollTop das Dokument so scrollen,
dass das gewünschte Element sichtbar wird.
Gehen wir zum Beispiel davon aus, dass wir zum
Element #foo scrollen wollen, wenn der
Anwender auf das Element #bar
klickt:
jQuery('#bar').click(function() {
var fooOffset = jQuery('#foo').offset(),
destination = fooOffset.top;
jQuery(document).scrollTop(destination);
});Lösung: Scrollen innerhalb eines Elements
Befindet sich Ihr Ziel-Element in einem
scrollenden Container, dann nutzen Sie die Methode position, um die Position des Elements relativ zum
Container herauszufinden, addieren diese zur aktuellen
Scroll-Position des Containers und nutzen anschließend die Methode
scrollTop, um den Container so zu
scrollen, dass das Element sichtbar wird. Beachten Sie, dass der
scrollende Container positioniert sein muss – über position: relative, position: absolute oder position: fixed – damit dies funktioniert.
Schauen Sie sich zum Beispiel das folgende
Markup an, das so angelegt wurde, dass #foo nicht groß genug ist, um beide Absätze auf
einmal anzuzeigen.
<head>
<style>
#foo {
width:300px;
padding:10px;
height:20px;
border:1px solid black;
overflow:auto;
position:relative;
}
</style>
</head>
<body>
<input type="button" id="bar" value="Zum letzten Absatz scrollen" />
<input type="button" id="bam" value="Animiert zum letzten Absatz scrollen" />
<div id="foo">
<p>Dies ist der erste Absatz. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
<p>Dies ist der zweite Absatz. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
<!-- Viele Absätze mehr -->
</div>
</body>
Es ist einfach, zu #foo zu scrollen, um den letzten Absatz
anzuzeigen:
var $foo = jQuery('#foo');
$('#bar').click(function() {
var lastParagraphPosition = jQuery('#foo p:last').position();
var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
$foo.scrollTop(scrollPosition);
});
In beiden Beispielen geschieht das Scrollen
sofort – effizient, aber nicht sonderlich hübsch. Die Methode
animate animiert die Eigenschaft
scrollTop eines Elements, so dass ein
elegantes Scrollen leicht umzusetzen ist. So würden wir es für den
Scroll-Container realisieren:
var $foo = jQuery('#foo');
$('#bam').click(function() {
var lastParagraphPosition = jQuery('#foo p:last').position();
var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
jQuery('#foo').animate({scrollTop: scrollPosition}, 300);
});