Cross-Browser-JavaScript (nicht jQuery...) Scrollen zur oberen Animation

Question

Ich suche nach einer einfachen, plattformübergreifenden "Zurück nach oben scrollen"-Animation, die ich auf einen Link anwenden kann. Ich möchte keine JS-Bibliothek wie jQuery/Moo usw. benötigen.

// jQuery-Äquivalent zum Konvertieren in reinen JS...
$('html, body').animate({scrollTop:0}, 400);

Ich bin ein perfekter Fall für jemanden, der JS zu 100% hätte lernen sollen, bevor er in eine Bibliothek gesprungen ist. :(

Answer 1

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Demo:

function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop == to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}

Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite.  Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite.  Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite.  Sehr lange Seite.Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite.  Sehr lange Seite.Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite. Sehr lange Seite.

Nach oben

Answer 2

Es sieht so aus, als gäbe es bereits viele Lösungen. Hier ist trotzdem eine weitere, die Easing-Gleichungen verwendet.

// zuerst raf shim hinzufügen
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// Hauptfunktion
function scrollToY(scrollTargetY, speed, easing) {
    // scrollTargetY: der Ziel-scrollY-Wert des Fensters
    // speed: Zeit in Pixeln pro Sekunde
    // easing: zu verwendende Easing-Gleichung

    var scrollY = window.scrollY || document.documentElement.scrollTop,
        scrollTargetY = scrollTargetY || 0,
        speed = speed || 2000,
        easing = easing || 'easeOutSine',
        currentTime = 0;

    // Mindestzeit 0,1 Sekunden, Höchstzeit 0,8 Sekunden
    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));

    // Easing-Gleichungen von https://github.com/danro/easing-js/blob/master/easing.js
    var easingEquations = {
            easeOutSine: function (pos) {
                return Math.sin(pos * (Math.PI / 2));
            },
            easeInOutSine: function (pos) {
                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
            },
            easeInOutQuint: function (pos) {
                if ((pos /= 0.5) < 1) {
                    return 0.5 * Math.pow(pos, 5);
                }
                return 0.5 * (Math.pow((pos - 2), 5) + 2);
            }
        };

    // Animationsloop hinzufügen
    function tick() {
        currentTime += 1 / 60;

        var p = currentTime / time;
        var t = easingEquations[easing](p);

        if (p < 1) {
            requestAnimFrame(tick);

            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
        } else {
            console.log('scroll fertig');
            window.scrollTo(0, scrollTargetY);
        }
    }

    // einmal aufrufen, um zu beginnen
    tick();
}

// Los geht's!
scrollToY(0, 1500, 'easeInOutQuint');

Answer 3

window.scroll({top: 0, left: 0, behavior: 'smooth' });

Erfahren Sie mehr darüber in einem Artikel über Sanftes Scrollen.

Bei Bedarf stehen einige Polyfills zur Verfügung.

Answer 4

Ich habe TimWollas Antwort modifiziert, um die quadratische Ein- und Ausblendung (etwas sanfter :) zu verwenden. Hier ist ein Beispiel in Aktion: auf jsFiddle. Easing-Funktionen sind hier verfügbar: Robert Penners Easing-Funktionen

document.getElementsByTagName('button')[0].onclick = function () {
    scrollTo(document.body, 0, 1250);   
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        increment = 20;

    var animateScroll = function(elapsedTime) {        
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);                        
        element.scrollTop = position; 
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

function easeInOut(currentTime, start, change, duration) {
    currentTime /= duration / 2;
    if (currentTime < 1) {
        return change / 2 * currentTime * currentTime + start;
    }
    currentTime -= 1;
    return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}

Answer 5

Ohne JQuery-Code, hoffe das hilft Ihnen.

function TopscrollTo() {
if(window.scrollY!=0)
{
    setTimeout(function() {
       window.scrollTo(0,window.scrollY-30);
        TopscrollTo();
    }, 100);
   }
}

Rufen Sie diese TopscrollTo() Funktion beim Klick auf die Schaltfläche oder bei einem anderen Element/Ereignis auf, für das Sie sie haben möchten.