Mit JavaScript an den Anfang der Seite blättern?

Question

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.

Answer 1

<script>

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

in html

<a href="#top">go top</a>

Answer 2

Mit window.scrollTo(0, 0); ist sehr schnell
Also habe ich das Beispiel von Mark Ursino ausprobiert, aber in Chrome passiert nichts
und ich fand dies

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

in allen 3 Browsern getestet und es funktioniert
ich verwende blueprint css
Wenn ein Kunde auf die Schaltfläche "Jetzt buchen" klickt und den Mietzeitraum nicht ausgewählt hat, bewegt er sich langsam nach oben, wo die Kalender sind, und öffnet ein Dialogfeld, das auf die 2 Felder verweist; nach 3 Sekunden wird es ausgeblendet

Answer 3

Wenn Sie einen flüssigen Bildlauf durchführen möchten, versuchen Sie dies:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Eine andere Lösung ist die JavaScript-Methode window.scrollTo :

 window.scrollTo(x-value, y-value);

Parameter :

• Der x-Wert ist der Pixel entlang der horizontalen Achse.
• Der y-Wert ist der Pixel entlang der vertikalen Achse.

Answer 4

A Los von Benutzer Es wird empfohlen, sowohl die html- als auch die body-Tags auszuwählen, um die Kompatibilität mit anderen Browsern zu gewährleisten, etwa so:

$('html, body').animate({ scrollTop: 0 }, callback);

Dies kann Sie jedoch in Schwierigkeiten bringen, wenn Sie damit rechnen, dass Ihr Rückruf nur einmal ausgeführt wird. Es wird in der Tat zweimal laufen, weil Sie zwei Elemente ausgewählt haben.

Wenn das ein Problem für Sie ist, können Sie so vorgehen:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

Der Grund dafür ist, dass dies in Chrome funktioniert $('html').scrollTop() gibt 0 zurück, aber nicht in anderen Browsern wie Firefox.

Wenn Sie nicht warten wollen, bis die Animation abgeschlossen ist, wenn die Bildlaufleiste bereits oben ist, können Sie dies versuchen:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Answer 5

Sanfter Bildlauf und Animation mit Vanille Javascript , ohne jQuery

// Get the element
let topBtn = document.querySelector(".top-btn");

// On Click, Scroll to the page's top, replace 'smooth' with 'auto' if you don't want smooth scrolling
topBtn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });

// On scroll, Show/Hide the btn with animation
window.onscroll = () => window.scrollY > 500 ? topBtn.style.opacity = 1 : topBtn.style.opacity = 0

body {
  background-color: #111;
  height: 5000px;
}

.top-btn {
  all: unset; 
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  transform:scale(1.8);
  opacity: 0;
  transition: .3s;
}

<button class="top-btn"></button>