it-swarm.com.de

So springen Sie zum Anfang der Browserseite

Ich schreibe ein modales Popup und der Browser muss zum oberen Bildschirmrand springen, wenn die Schaltfläche zum Öffnen des Modals gedrückt wird. Gibt es eine Möglichkeit, den Browser mit jQuery nach oben zu scrollen?

173
Exitos

Sie können das scrollTop folgendermaßen festlegen:

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

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

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

Ohne Animation können Sie einfaches JS verwenden:

scroll(0,0)

Überprüfen Sie mit Animation Nicks Antwort .

128
Ionuț Staicu

Wenn Sie das Dialogfeld "jQuery-Benutzeroberfläche" verwenden, können Sie das Modal so formatieren, dass es an der im Fenster festgelegten Position angezeigt wird, damit es nicht aus der Ansicht erscheint und kein Bildlauf erforderlich ist. Andernfalls,

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

sollte den Trick machen.

33
Silkster

Sie könnten es ohne Javascript tun und einfach Anker-Tags verwenden? Dann wäre es für die js frei zugänglich.

obwohl du modale verwendest, gehe ich davon aus, dass es dir egal ist, ob du frei bist oder nicht. ;)

13
S.Kiers

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

Plain JS: window.scrollTop=0;

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

2
Josh Powlison
// 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>
1
Waruna Manjula

wenn Sie das Dialogfeld "jQuery-Benutzeroberfläche" verwenden, können Sie das Modal so gestalten, dass es an der im Fenster festgelegten Position angezeigt wird, damit es nicht aus der Ansicht erscheint und kein Bildlauf erforderlich ist. Andere

1
gary