jQuery: Nach unten und nach oben scrollen mit und ohne JavaScript

In zwei anderen Tipps habe ich bereits gezeigt, wie man mit der Hilfe von JavaScript und jQuery sanft nach unten und nach oben auf einer Seite scrollen kann. Das Problem dieser Lösung: Sie funktioniert nur, wenn der Nutzer auch JavaScript in seinem Browser aktiviert hat.

In diesem Tipp möchte ich eine Lösung zeigen, die ein schönes animiertes Scrollen mit JavaScript ausführt, jedoch nicht versagt, wenn JavaScript deaktiviert ist. Ist JavaScript nicht aktiv, wird normal nach unten oder nach oben gesprungen.

HTML

Um unser Beispiel umzusetzen, programmieren wir als erstes eine reine HTML Lösung, die auch ohne JavaScript funktioniert:

<!-- Ganz oben auf der der Seite: -->
<a name="oben"></a>

<!-- Links irgendwo auf der Seite: -->
<a href="#oben">Nach oben</a>
<a href="#unten">Nach unten</a>

<!-- Ganz unten auf der Seite: -->
<a name="unten"></a>

Zunächst markieren wir oben und unten unserer Seite mit unseren Anchor-Links ("a name"). Dies sind die Stellen, an die gesprungen werden soll, wenn wir nach oben oder nach unten Scrollen. In der Mitte sehen wir zwei Links, die diese Stellen anspringen. Diese Links kann man überall in der Seite verwenden und es können auch mehrere nach-oben-Links oder nach-unten-Links in die Seite eingebaut werden.

Dieses HTML sorgt dafür, dass wir auf der Seite schon nach oben und unten mit den Links springen können. Was noch fehlt ist die Animation. Dafür funktioniert dies auch mit ausgeschaltetem JavaScript.

JavaScript

Nun kommen wir zu unserem jQuery Teil. In den beiden anderen Tipps habe ich den Vorgang bereits beschrieben, wir passen ihn nur für unsere Links an:

$(document).ready(function() {
  //Nach oben scrollen
  $("a[href=#oben]").click(function(){
    $("html, body").animate({scrollTop:0}, 800);
    return false;
  });
 
  //Nach unten scrollen
  $("a[href=#unten]").click(function(){
    $("html, body").animate({scrollTop:$(document).height()}, 800);
    return false;
  });
});

Die Selektoren "a[href=#oben]" beziehungsweise "a[href=#unten]" wählen unsere oben beschriebenen Anchor-Links aus und belegen diese mit unserer sanften Scrollfunktion.

Für den Fall, dass der Nutzer JavaScript deaktiviert hat, wird dieser Code nicht ausgeführt und es bleibt bei dem normalen Springen mit dem HTML-Anker-Links. Falls der Nutzer aber JavaScript aktiviert hat, scrollt die Seite sanft und geschmeidig.