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

Einfach.

var scrollIt = function(time) {
    // Zeit = Scroll-Zeit in ms
    var start = new Date().getTime(),
        scroll = document.documentElement.scrollTop + document.body.scrollTop,
        timer = setInterval(function() {
            var now = Math.min(time,(new Date().getTime())-start)/time;
            document.documentElement.scrollTop
                = document.body.scrollTop = (1-time)/start*scroll;
            if( now == 1) clearTimeout(timer);
        },25);
}

Answer 2

Basierend auf einigen der Antworten hier, aber unter Verwendung einiger einfacher Mathematik für einen reibungslosen Übergang mit einer Sinuskurve:

scrollTo(element, from, to, duration, currentTime) {
       if (from <= 0) { from = 0;}
       if (to <= 0) { to = 0;}
       if (currentTime>=duration) return;
       let delta = to-from;
       let progress = currentTime / duration * Math.PI / 2;
       let position = delta * (Math.sin(progress));
       setTimeout(() => {
           element.scrollTop = from + position;
           this.scrollTo(element, from, to, duration, currentTime + 10);
       }, 10);
   }

Verwendung:

// Glattes Scrollen von der aktuellen Position zur neuen Position in 1/2 Sekunde.
scrollTo(element, element.scrollTop, element.scrollTop + 400, 500, 0);

PS. Beachten Sie den ES6-Stil

Answer 3

Nur diese reine Javascript-Lösung unten gemacht.

Einfache Verwendung:

EPPZScrollTo.scrollVerticalToElementById('wrapper', 0);

Engine-Objekt (Sie können mit den Filter-, FPS-Werten herumspielen):

/**
 *
 * Erstellt von Borbás Geri am 17.12.13
 * Urheberrecht (c) 2013 eppz! development, LLC.
 *
 * Hiermit wird jeder Person, die eine Kopie dieser Software und zugehöriger Dokumentationsdateien (die "Software") erhält, kostenlos die Erlaubnis erteilt, die Software uneingeschränkt zu nutzen, einschließlich, aber nicht beschränkt auf das Recht, Kopien der Software zu verwenden, zu ändern, zu fusionieren, zu veröffentlichen, zu verbreiten, unterlizenzieren und/oder Kopien der Software zu verkaufen, und Personen zu ermächtigen, denen die Software zur Verfügung gestellt wird, dies unter den folgenden Bedingungen zu tun:
 * Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
 * DIE SOFTWARE WIRD "WIE SIE IST", OHNE JEGLICHE GEWÄHRLEISTUNG, AUSDRÜCKLICH ODER STILLSCHWEIGEND, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTFÄHIGKEIT, DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND DER NICHTVERLETZUNG, BEREITGESTELLT. IN KEINEM FALL HAFTEN DIE AUTOREN ODER COPYRIGHT-INHABER FÜR ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, UNABHÄNGIG DAVON, OB SIE AUS EINEM VERTRAG, EINER UNERLAUBTEN HANDLUNG ODER ANDERWEITIG ERGEBEN, DIE AUS, IN VERBINDUNG MIT DER SOFTWARE ODER DER VERWENDUNG ODER ANDEREN GESCHÄFTEN MIT DER SOFTWARE.
 *
 */

var EPPZScrollTo =
{
    /**
     * Helfer.
     */
    documentVerticalScrollPosition: function()
    {
        if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (Standardsmodus).
        if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 und 8.
        return 0; // Keines der oben genannten.
    },

    viewportHeight: function()
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

    documentHeight: function()
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

    documentMaximumScrollPosition: function()
    { return this.documentHeight() - this.viewportHeight(); },

    elementVerticalClientPositionById: function(id)
    {
        var element = document.getElementById(id);
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },

    /**
     * Animations-Tick.
     */
    scrollVerticalTickToPosition: function(currentPosition, targetPosition)
    {
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

        // Schnappschuss, dann anhalten, wenn angekommen.
        var arrived = (Math.abs(difference) <= 0.5);
        if (arrived)
        {
            // Ziel anwenden.
            scrollTo(0.0, targetPosition);
            return;
        }

        // Gefilterte Position.
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

        // Ziel anwenden.
        scrollTo(0.0, Math.round(currentPosition));

        // Nächsten Tick planen.
        setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
    },

    /**
     * Für die öffentliche Verwendung.
     *
     * @param id Die ID des Elements, zu dem gescrollt werden soll.
     * @param padding Oben anzuwendender Abstand über dem Element.
     */
    scrollVerticalToElementById: function(id, padding)
    {
        var element = document.getElementById(id);
        if (element == null)
        {
            console.warn('Element mit ID \''+id+'\' konnte nicht gefunden werden.');
            return;
        }

        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
        var currentPosition = this.documentVerticalScrollPosition();

        // Begrenzen.
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

        // Animation starten.
        this.scrollVerticalTickToPosition(currentPosition, targetPosition);
    }
};

Answer 4

Dies ist ein plattformübergreifender Ansatz basierend auf den oben genannten Antworten

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

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

Answer 5

Ein weiterer Ansatz ist die Verwendung von window.scrollBy

JSFiddle

function scroll(pxProFrame, dauer) {
        if (!pxProFrame || !dauer) return;
        const ende = new Date().getTime() + dauer;
        schritt(); 

        function schritt() {
          window.scrollBy(0, pxProFrame);
          if (new Date().getTime() < ende) {
            window.setTimeout(schritt, 1000 / 60);
          } else {
            console.log('Scrollen abgeschlossen'); 
          }
        }
      }

body {
  width: 200px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

scroll(-5, 3000)