Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

Wenn man lange Webseiten mit viel Inhalt hat, muss auch viel gescrollt werden. Dies kann dem Besucher selber überlassen werden, oder es können Buttons zum scrollen eingefügt werden. Früher waren dies einfach Sprungmarken, welche auf bestimmte Ankerpunkte verwiesen haben, heute gibt es hier elegantere Lösungen.

Die animierte Lösung mit jQuery

Mit jQuery hat man die Möglichkeit, das Scrollen nach unten und nach oben zu animieren. Dies bietet neben einer ansprechenden Darstellung auch den Vorteil, dass der Besucher sieht, wohin er scrollt, und nicht einfach an eine unbekannte Stelle springt. Per CSS können zum Beispiel solche Scroll-Buttons mit fixierter Position definiert werden, die dann auf der Webseite immer an der gleichen Stelle zu finden sind. Im folgenden ist ein einfaches Demo zu sehen, wie ein Inhaltsbereich auf diese Art mit Scroll-Buttons versehen werden kann.

Scrollen mit jQuery

Live Demo anschauen

Der HTML Code und das Styling mit CSS

Der HTML Code beinhaltet drei div-Container, welche mit einer id versehen sind. Zwei Container beinhalten die Scroll-Buttons, und der Dritte den Inhaltsbereich.

<body>

<div id="to_top"><img src="pictures/to_top_blau.gif" width="42" height="58" border="0" /></div>

<div id="to_bottom"><img src="pictures/to_bottom_blau.gif" width="42" height="58" border="0" /></div>

<div id="all">
  <h1>Inhalt zum Scrollen</h1>
  <p>Inhalt des div-Containers (Im Demo der lorem ipsum Text)</p>
</div>

</body>

Gestylt wird dieser Quellcode mit etwas CSS. Die div-Container für die Buttons werden mit position:fixed definiert, damit sie immer an der gleichen Stelle erscheinen (auch wenn das Browserfenster vergrössert oder vekleinert wird).

CSS-File anschauen

Der jQuery Code für die Animation

/Der folgende Code soll erst gestartet werden, wenn das Dokument fertig geladen ist
$(document).ready(function(){  

//Trick, damit das Scrollen auch in Opera funktioniert
if ($.browser.opera) {
var target = 'html';
} else {
var target = 'html,body';
}

//Definition des zu scrollenden Containers
var $container = $('#all');

//Klick auf Button scrollt nach unten
$('#to_bottom').click(
  function () {
   $(target).animate({scrollTop: $container.height()}, 2000);
  }
 );

//Klick auf Button scrollt nach oben
 $('#to_top').click(
  function () {
   $(target).animate({scrollTop: '0px'}, 1500);
  }
 );

});

Wie man im Code sieht, geschieht das eigentliche Scrollen einfach durch zwei Funktionen, welche über einen Klick-Event an den entsprechenden Scroll-Button gebunden werden. Damit jQuery weiss, wie weit nach unten gescrollt werden muss, wird hierfür die Höhe des entsprechenden Inhalt-Containers ausgelesen.

Share This