Back To Top Button ohne jQuery
Kategorie:
Veröffentlicht: 24.07.2019
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein! Für aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich über neue Artikel und wichtige Hinweise von uns!

Der Zurück nach oben Button

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

Ich sehe immer wieder Webseiten die einen Zurück nach oben Button mit jQuery realisiert haben, obwohl sie dieses nur 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 keine Workarounds mehr für verschiedenen Browser benötigt kommt man auch ganz gut ohne aus.

Der Beispielcode ist voll funktionsfähig und ohne extra CSS möglich zu verwenden allerdings kannst du natürlich ihn noch an das CSS deiner Seite anpassen. Der Code wird genauso für HelloCoding verwendet.

Zurück nach oben Scrollen Script erklärt

Das Script für den Zurück nach oben Button ohne jQuery ist Folgendermaßen aufgebaut. Als erstes sehen wir eine Funktion Parameter den wir “h” genannt haben, über den wird eine Integer definiert über diesen wird abgefragt ab welcher Höhe der Button sichtbar werden soll. Darauf folgt eine Anweisung zum erstellen eines Back to Top Buttons in der Variable defaultStyles definieren wir unseren stylen 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 Zurück nach oben Button hat im HTML Markup 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 Back To Top 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 smoothen 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 eine der beiden interessanten Bereiche über diese Zeile sagen wir das jedes Mal wenn gescrollt wird auf das Event gehört werden soll und die function soll ausgeführt werden. In der Funktion fragen wir die Höhe mit window.pageYOffset ab und 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 Zurück nach oben 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 BackToTop 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 BackToTop Butto zum Body appenden wollen.

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

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

Ich freue mich wenn ich dir mit dem Beitrag weiterhelfen konnte, falls nicht schreib mir gerne ein Kommentar. Warum ich dir nicht mit dem Beitrag helfen konnte?

Kommentare

Es sind noch keine Kommentare vorhanden? Sei der Erste und schreib ein Kommentare zum Artikel "Back To Top Button ohne jQuery ".

Kommentar Schreiben:

Home Menü Suche
X