2018 Stimmen

Mit JavaScript an den Anfang der Seite blättern?

Wie kann ich mit JavaScript an den Anfang der Seite blättern? Die Bildlaufleiste, die sofort an den Anfang der Seite springt, ist ebenfalls wünschenswert, da ich nicht auf einen reibungslosen Bildlauf aus bin.

75voto

Dalex Punkte 2894

Alle diese Vorschläge eignen sich hervorragend für verschiedene Situationen. Für diejenigen, die diese Seite über eine Suche finden, kann man auch diese einen Versuch. JQuery, kein Plug-in, zum Element blättern.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

59voto

wake-up-neo Punkte 784

Flüssiges Scrollen, reines Javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

46voto

Kamlesh Kumar Punkte 1424
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Bearbeiten:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Eine andere Möglichkeit ist das Blättern mit oberem und linkem Rand:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

38voto

AvL Punkte 3023

Wirklich seltsam: Diese Frage ist seit fünf Jahren aktiv und es gibt immer noch keine Vanilla-JavaScript-Antwort, um das Scrollen zu animieren Also hier ist sie:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Wenn Sie möchten, können Sie dies in eine Funktion verpacken und diese über die onclick Attribut. Prüfen Sie dies jsfiddle

Hinweis: Dies ist eine sehr einfache Lösung und vielleicht nicht die leistungsfähigste. Ein sehr ausführliches Beispiel finden Sie hier: https://github.com/cferdinandi/smooth-scroll

33voto

M Komaei Punkte 3902

Blättern Sie zu top der Seite mit Animation :

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X