Der "Back To Top"-Button

Ich sehe immer wieder Webseiten, die einen “Back To Top” bzw. “Zurück nach oben”-Button mit jQuery realisiert haben, obwohl sie dieses Framework ausschließlich für diesen Button verwenden. Da hab ich mich doch gefragt: Warum? Warum soll ich für eine einfache Scroll Animation und Abfragen der aktuellen Position gleich eine Framework wie jQuery verwenden?

Das macht natürlich keinen Sinn mehr, da JavaScript selten Workarounds für verschiedenen Browser benötigt und man daher auch ganz gut ohne auskommt.

Der Beispielcode ist voll funktionsfähig und ohne extra CSS verwendbar. Allerdings kannst du ihn natürlich noch an das CSS deiner Seite anpassen. Der Code wird ähnlich für HelloCoding verwendet.

“Scroll Back To Top”-Script erklärt

Das Script für den “Back To Top”-Button ohne jQuery ist folgendermaßen aufgebaut: Zuerst sehen wir die Funktion Parameter. Den Parameter haben wir “h” genannt. Über ihn wird eine Integer definiert, über den wiederum abgefragt wird, ab welcher Höhe der Butten sichtbar werden soll. Darauf folgt eine Anweisung zum Erstellen eines “Back To Top”-Buttons. In der Variable defaultStyles definieren wir unseren Style. Diesen können wir aber auch in einem externen Stylesheet schreiben, darauf habe ich bezüglich der Einfachheit des Kopierens verzichtet.

Der durch Javascript generierte “Back To Top”-Button hat folgendes Aussehen:

<span id="backto" 
			style="position: fixed; bottom: 10px; left: 10px; background: rgb(239, 65, 54); padding: 20px; opacity: 0; transition: all 0.5s ease 0s; visibility: hidden;">Back To</span>

Über die angelegte ID "backto" könnt ihr eurem Button eigene Styles geben. Zusätzlich könnt ihr die Variable defaultStyles bearbeiten.

/**
 *  @author Felix Schürmeyer
 *  @version 0.1
 *  @date 24/07/2019
 *  @param h(int) => Höhe, ab der BackToTop sichtbar werden soll
 */

function backTo(h) {

		// Erstellen des "BackToTop"-Buttons

    var defaultStyles = 'position:fixed;bottom:10px;left: 10px;background: #ef4136;padding:20px;opacity: 0;transition: all 0.5s;visibility: hidden;';
    var link = document.createElement('span');
    link.setAttribute('id', 'backto');
    link.innerText = "Back To";
    link.style.cssText = defaultStyles;
    document.body.appendChild(link);

    /**
     * Funktion zum Prüfen der aktuellen Höhe, der Wert "h" wird gegeben;
     */

    document.addEventListener('scroll', function (e) {
        let positon = window.pageYOffset;
        if (positon >= h) {
            link.style.opacity = 1;
            link.style.visibility = 'visible';
        } else {
            link.style.opacity = 0;
            link.style.visibility = 'hidden';
        }

    });

    /***
     *  Click Funktion zum sanften nach-oben-Scrollen
     */


    var ScrollHandler = function(e){
        e.preventDefault();
        
        var i = window.pageYOffset;
        var int = setInterval(function () {
            window.scroll(0, i);
            i -= 30;
            if (i <= 0) clearInterval(int);
        }, 2);
    }

    link.addEventListener('click',ScrollHandler);

}

Nun folgt einer der beiden interessanten Bereiche: Über diese Zeile sagen wir, das jedes Mal, wenn gescrollt wird, auf das Event gehört werden und die Funktion ausgeführt werden soll. In der Funktion fragen wir die Höhe mit window.pageYOffset ab. Wenn diese Höhe größer als unser definiertes “h” ist, dann wird die Opacity und Visibility auf sichtbar gesetzt.

 document.addEventListener('scroll', function (e) {....});

Danach folgt die ScrollHandler-Funktion, wo wir durch einen Intervall in regelmäßigen Abständen die aktuelle Scroll Position runterzählen lassen, bis wir bei 0 angekommen sind. Über den EventListener auf unseren erstellten “Back To Top”-Button wird nun diese Funktion jedes mal beim Klicken ausgeführt.

 link.addEventListener('click',ScrollHandler);

Minifizierter Code zum Kopieren

Ich habe für euch einmal eine minifizierte Version erstellt diese könnt ihr bequeme in eure Projekte kopieren. Schaut euch am besten noch einmal weiter unten den Beispiel Aufruf an.

/**
 *  @author Felix Schürmeyer
 *  @version 0.1
 *  @date 24/07/2019
 *  @param t (int) => Höhe, ab der BackToTop sichtbar werden soll
 */

function backTo(t){var e=document.createElement("span");e.setAttribute("id","backto"),e.innerText="Back To",e.style.cssText="position:fixed;bottom:10px;left: 10px;background: #ef4136;padding:20px;opacity: 0;transition: all 0.5s;visibility: hidden;",document.body.appendChild(e),document.addEventListener("scroll",function(i){window.pageYOffset>=t?(e.style.opacity=1,e.style.visibility="visible"):(e.style.opacity=0,e.style.visibility="hidden")});e.addEventListener("click",function(t){t.preventDefault();var e=window.pageYOffset,i=setInterval(function(){window.scroll(0,e),(e-=30)<=0&&clearInterval(i)},2)})}

Beispiel Aufruf vom Scroll Back To Top Button

Hier haben wir nun den Aufruf von “Back To Top”. Dieser kann in eurer JS Datei oder in eine <script>-Tag geschrieben werden. Zu beachten ist, dass wir hier nun warten, bis das Dokument geladen ist, da wir unseren “Back To Top”-Button zum Body appenden wollen.

Das Beispiel ist auf der Seite von HelloCoding funktionsfähig und kann getestet werden.

document.addEventListener('DOMContentLoaded',function(){
	backTo(400);  // 400 ist 400px von Oben
}