|
|
| Zeile 1: |
Zeile 1: |
| /* Das folgende JavaScript wird für alle Benutzer geladen. */ | | /* Das folgende JavaScript wird für alle Benutzer geladen. */ |
| mw.loader.load( '/index.php?title=MediaWiki:Scroll-to-Top.js&action=raw&ctype=text/javascript' ); | | mw.loader.load( '/index.php?title=MediaWiki:Scroll-to-Top.js&action=raw&ctype=text/javascript' ); |
| /* 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);
| |
| }
| |
