JS für reibungsloses Scrollen zum Ende der Seite

Ich habe ein JS, um damit einen reibungslosen Bildlauf vom Ende der Seite nach oben zu machen, und es funktioniert:

<script>

     $("a[href="#top"]").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return true;
  });
</script>

Aber jetzt möchte ich einen glatten Bildlauf von oben nach unten machen, ich habe es damit versucht:

 <script>

     $("a[href="#footer"]").click(function() {
     $("html, body").animate({ scrollToBottom: 0 }, "slow");
     return true;
  });
</script>`

Es funktioniert nicht, es ist kein reibungsloser Bildlauf. Weiß jemand, was daran falsch ist?

Mit reinem JS:

 window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

und nach oben als:

 window.scrollTo({ top: 0, behavior: 'smooth' })

So etwas gibt es nicht scrollToBottom. Versuche dies:

$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");

Eine umfassendere Liste von Methoden für reibungsloses Scrollen finden Sie in meiner Antwort hier.

Um zum Ende der Seite zu scrollen, kann die y-Position auf eingestellt werden document.scrollingElement.scrollHeight.

Um in einer bestimmten Zeit zu einer bestimmten Position zu scrollen, window.requestAnimationFrame verwendet werden, wobei jedes Mal die entsprechende aktuelle Position berechnet wird. setTimeout kann zu einem ähnlichen Effekt verwendet werden, wenn requestAnimationFrame wird nicht unterstützt.

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

document.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(document.scrollingElement.scrollHeight, 1000);
});

html, body {
  height: 5000px;
}

<button>Scroll to bottom</button>

Der SmoothScroll.js-Bibliothek kann ebenfalls verwendet werden, was komplexere Fälle behandelt, wie z. B. glattes vertikales und horizontales Scrollen, Scrollen innerhalb anderer Containerelemente, unterschiedliche Beschleunigungsverhalten, Scrollen relativ von der aktuellen Position und mehr.

smoothScroll({yPos: 'end', duration: 1000});

document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'end', duration: 1000});
});

html, body {
  height: 5000px;
}

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/[email protected]/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button>Scroll to bottom</button>

// Scroll smoothly to the bottom
domElement.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth',
})

Alle Optionen für scrollTo Sind:

• top: number
• left: number
• behavior: 'smooth' oder behavior: 'auto'

Die akzeptierte Antwort und andere sind korrekt, wollten aber einen weiteren Anwendungsfall hinzufügen, der jemandem helfen könnte.

In einigen Fällen müssen Sie innerhalb von a scrollen setTimeout()‘s Rückruf mit kurzer Verzögerung.

function scrollToBottom() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}

setTimeout(function() { scrollToBottom(); }, 100);

Zum Beispiel: Sie haben eine <button> was ein hinzufügt <div> Element an das Ende der Seite, wenn darauf geklickt wird, und Sie möchten nach unten scrollen, damit der Benutzer dieses neue div sehen kann. In diesem Fall müssen Sie manchmal (abhängig vom Verhalten der Ereignisschleife) innerhalb von a scrollen setTimeout() weil dieselbe Aktion, die das Scrollen auslöst, tatsächlich den Wert von ändert document.body.scrollHeight. Indem Sie es verzögern, verwenden Sie den neuen aktualisierten Wert von document.body.scrollHeight nachdem das div hinzugefügt wurde.