Schaltfläche zur Rückkehr an den Seitenanfang in Onlinedokumentation

Um die Rückkehr an den Seitenanfang zu erleichtern, erscheint auf langen Webseiten rechts unten im Browserfenster oft eine kleine Schaltfläche. Mit dieser Schaltfläche können Nutzer mit einem Klick wieder zurück nach oben an den Seitenanfang scrollen.

Eine solche Schaltfläche können Sie auch in eine Onlinedokumentation einbauen. Alles, was Sie dazu brauchen, sind eine kleine Open-Source-JavaScript-Bibliothek und ein paar Zeilen vorgefertigter Code in Ihrer Seitenvorlage.

Beispiele

Probieren Sie es aus: Wenn Sie auf dieser Seite nach unten scrollen, erscheinen rechts unten im Browserfenster kurz nacheinander zwei Schaltflächen (zwei Schaltflächen deshalb, um Ihnen hier zwei alternative Lösungen zeigen zu können). Ein Klick auf eine dieser Schaltflächen bringt Sie zurück zum Anfang der Seite.

Implementierung zu Beispiel 1 (graue Schaltfläche)

Diese Lösung nutzt die Open-Source-JavaScript-Bibliothek jQuery GoUp!

Die Lösung benötigt außerdem die Bibliothek jQuery (wird von vielen Redaktionssystemen bereits standardmäßig in den Output eingebunden).

Schritt 1: Falls Ihr Redaktionssystem jQuery nicht bereits einbindet, binden Sie dieses manuell ein (siehe hierzu die Dokumentation zu jQuery).

Schritt 2: Fügen Sie in Ihrer Seitenvorlage am Ende des Body-Abschnitts folgenden Code ein:


<script src="YOUR-PATH/jquery.goup.min.js"></script>
<script>
 $(document).ready(function(){
  $.goup({
   containerColor: "#373737",
   arrowColor: "#fff",
   bottomOffset: 80,
   locationOffset: 30,
   hideUnderWidth: 0,
   trigger: 350,
   goupSpeed: 0
  });
 });
</script>

Die erste Zeile bindet das externe Skript ein. Passen Sie den Pfad in der ersten Zeile entsprechend Ihrer Installation an.

Der Block darunter initialisiert das Skript und führt es aus. Die darin enthaltenen Parameter können Sie Bedarf anpassen und beispielsweise eine andere Farbe wählen oder die Position ändern. Siehe hierzu die Dokumentation zum Skript.

Implementierung zu Beispiel 2 (blaue Schaltfläche)

Diese Lösung nutzt die Open-Source-JavaScript-Bibliothek Vanilla Back To Top

Im Gegensatz zu Beispiel 1 benötigt diese Lösung jQuery nicht.

Fügen Sie in diesem Fall Ihrer Seitenvorlage am Ende des Body-Abschnitts folgenden Code ein:


<script src="YOUR-PATH/vanilla-back-to-top.min.js"></script>
<script>
 addBackToTop({
  diameter: 50,
  backgroundColor: 'rgb(0, 102, 153)',
  cornerOffset: 50,
  textColor: '#fff'
 })
</script>

Passen Sie den Pfad in der ersten Zeile entsprechend Ihrer Installation an. Die anderen Parameter brauchen Sie nur bei Bedarf anzupassen.

___

Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.

---

Sie sehen die Schaltflächen noch nicht? Scrollen Sie weiter nach unten.

##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### ##### ####### ##### ####### ###### ######### #### ####### ### #### ###### ##### ####### ### ######## # ######### ##### ############ #### ####### #### ##### ### ######### #### ######### ### ####### ####### #### # #### ######## ############# ### ###### ###### ####### ## ####### ### ######## #### ##### ##### ## ####### ##### #### ######## ###### ######### ########## ######### ##### ## #### ######### #######.