MediaWiki:Common.js

/* Das folgende JavaScript wird für alle Benutzer geladen. */

/* Den "An den Anfang scrollen" Button auf allen Seiten hinzufügen. Der ist erst einmal dank seiner CSS-Eigenschaften unsichtbar */
/* Wird er angeklickt so wird die Funktion "topFunction" aufgerufen */
$(function () {
    var myElement = document.getElementById('mw-totopbutton');
    myElement.innerHTML = '<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>';
}());

/* Wenn nun mehr als 20 Pixel nach unten gescrollt wird blenden wir den Button wieder ein (oder aus wenn wir wieder ganz oben sind) */
/* Dazu wird der nachfolgende Aufruf = die Funktion bei jedem Scrollen aufgerufen, also ggf. ein paar duzend mal die Sekunde */
window.onscroll = function() {scrollFunction()};

/* Hier die eigentliche Funktion - wurde mehr als 20 Pixel nach unten gescrollt wir der Button eingeblendet */
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        /* Einblenden */
        document.getElementById("myBtn").style.display = "block";
    } else {
        /* Ausblenden */
        document.getElementById("myBtn").style.display = "none";
    }
}

// Ein klick auf den Button ruft diese nachfolgende Funktion auf: */
function topFunction() {
    /* Die nachfolgenden beiden Zeilen würden einfach - plopp - ganz nach oben springen */
    // document.body.scrollTop = 0; // For Safari
    // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    /* Wir mögen es sanft, die nachfolgende Funktion scrollt sanft nach oben, am zweiten Wert 1000 kann man die Geschwindigkeit anpassen */
    /* Wert ist ms, 1000 = 1 Sekunde | Die Zeit ist konstant, egal ob die Seite 1000 oder 50000 Pixel lang ist, der gesamte Scrollvorgang dauert immer die gleiche Zeit */
    /* Der erste Wert - hier 0 - steht für die Zielzeile */
    SoftScrollFunction(0, 1000)
}

/* Und die Funktion für das eigentliche Scrollen */
function SoftScrollFunction(y, duration) {
    var initialY = document.documentElement.scrollTop || document.body.scrollTop;
    var baseY = (initialY + y) * 0.5;
    var difference = initialY - baseY;
    var startTime = performance.now();

    function step() {
        var normalizedTime = (performance.now() - startTime) / duration;
        if (normalizedTime > 1) normalizedTime = 1;

        window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
        if (normalizedTime < 1) window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}