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

Ich habe die @akai-Version der Antwort von @timwolla ausgewählt und die stopAnimation-Funktion hinzugefügt, damit vor dem Starten einer neuen Animation die alte gestoppt werden kann.

if ( this.stopAnimation )
    this.stopAnimation()

    this.stopAnimation = scrollTo( el, scrollDestination, 300 )

// Definitionen

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

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

    animateScroll(0);

    return stopAnimation

    function stopAnimation() {
        clearTimeout( timeOut )
    }
}

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 2

JS Lösung ohne jQuery.

element.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' })

Answer 3

Das sanfte Scrollen ist jetzt standardmäßig in allen modernen Browsern implementiert. Sie können es auch polyfillen, um ältere Browser zu unterstützen.

// Scroll zu bestimmten Werten
// scrollTo ist dasselbe
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Um bestimmte Beträge von der aktuellen Position zu scrollen
window.scrollBy({ 
  top: 100, // könnte negativer Wert sein
  left: 0, 
  behavior: 'smooth' 
});

// Zu einem bestimmten Element scrollen
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

// Um bestimmte Beträge von der aktuellen Position für jedes Element zu scrollen
document.querySelector('.scrollable-element').scrollBy({
  top: 100, 
  behavior: 'smooth'
});

// Nach oben scrollen
var element = document.querySelector('.scrollable-element');
element.scrollBy({
  top: -element.scrollTop, 
  behavior: 'smooth'
});

Quelle: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 4

Ein weiterer plattformübergreifender Ansatz basierend auf der obigen Lösung

function doScrollTo(to, duration) {
    var element = document.documentElement;

        var start = element.scrollTop,
        change = to - start,
        increment = 20,
        i = 0;

    var animateScroll = function(elapsedTime) {
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);
        if (i === 1 && window.scrollY === start) {
            element = document.body;
            start = element.scrollTop;
        }
        element.scrollTop = position;
        if (!i) i++;
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

Der Trick besteht darin, die tatsächliche Scrolländerung zu steuern und wenn sie null ist, das Scroll-Element zu ändern.

Answer 5

Lineare Bildlaufanimation nach unten. Reines JS, kein JQuery. Vielleicht ist meine Lösung für jemanden hilfreich.

let action_count = 8;
let speed_ms = 15;
let objDiv = document.getElementsByClassName('js_y5_area3').item(0);

let scroll_height = objDiv.scrollHeight;
let window_height = objDiv.offsetHeight;

let scroll_top = objDiv.scrollTop;
let need_scroll_top = scroll_height - window_height;

if (scroll_top < need_scroll_top)
{
    let step = Math.ceil((need_scroll_top - scroll_top) / action_count);

    let scrollInterval = setInterval(function()
    {
        scroll_top += step;
        objDiv.scrollTop = scroll_top;

        if (scroll_top >= need_scroll_top)
        {
            clearInterval(scrollInterval);
        }

    }, speed_ms);
}

Sie können die Variablen action_count, speed_ms ändern, um die Bildlaufanimation nach Ihrem Geschmack zu konfigurieren.