So springen Sie zum Anfang der Browserseite

Question 1

Ich schreibe ein modales Popup und ich brauche den Browser, um an den oberen Rand des Bildschirms zu springen, wenn die modale Schaltfläche zum Öffnen gedrückt wird. Gibt es eine Möglichkeit, den Browser mit jQuery nach oben zu scrollen?

Question 2

Sie können die einstellen scrollTopso was:

$('html,body').scrollTop(0);

Oder wenn Sie eine kleine Animation anstelle eines Schnappschusses nach oben wünschen:

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

Question 3

Ohne Animation können Sie einfaches JS verwenden:

scroll(0,0)

Überprüfen Sie mit Animation Nicks Antwort.

Question 4

Wenn Sie das jQuery-UI-Dialogfeld verwenden, können Sie das Modal einfach so gestalten, dass es mit der im Fenster festgelegten Position angezeigt wird, damit es nicht aus dem Blickfeld verschwindet und nicht gescrollt werden muss. Andernfalls,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

sollte den Trick machen.

Question 5

Sie könnten auf Javascript verzichten und einfach Anchor-Tags verwenden? Dann wäre es für diese js frei zugänglich.

Obwohl Sie Modale verwenden, nehme ich an, dass es Ihnen egal ist, js-frei zu sein. 😉

Question 6

Vanille Javascript Lösung

theId.onclick = () => window.scrollTo({top: 0})

Wenn Sie reibungsloses Scrollen wünschen

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

Question 7

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Question 8

Ich weiß, das ist alt, aber für diejenigen, die Probleme in Edge haben:

Einfaches JS: window.scrollTop=0;

Leider, scroll() und scrollTo() Fehler in Edge werfen.