16 20 Stimmen

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

Tipp von Stefan Trost | 13.07.2012 um 13:07 Uhr

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.

AntwortenPositivNegativ

Über den Autor

Avatar AutorSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen | Nachricht

 

Ähnliche Themen

jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar

Wichtiger Hinweis

Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.