So springen Sie zum Anfang der Browserseite

185

Ich schreibe ein modales Popup und ich brauche den Browser, um zum oberen Bildschirmrand zu springen, wenn die geöffnete modale Taste gedrückt wird. Gibt es eine Möglichkeit, den Browser mit jQuery nach oben zu scrollen?

javascript jquery css modal-dialog Exitos
quelle

Antworten:

404

Sie können Folgendes einstellen scrollTop:

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

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

$('html, body').animate({ scrollTop: 0 }, 'fast');
Nick Craver
quelle
1
gut ... Ich habe zuvor das scrollTo-Plugin für jQuery verwendet, um dies zu erreichen - hätte ein bisschen Code mit Ihrem Code speichern können ... danke für die Lektion ;-)
Zathrus Writer
@MikhailBatcer - Deaktivieren Sie Ihr CSS und prüfen Sie, ob es funktioniert. Möglicherweise haben Sie ein Problem damit, wie Sie Ihre htmlund bodyTags gestaltet haben. Andernfalls verwenden Sie $(window)stattdessen.
Invot
Wie füge ich die Dauer für Animations-Scrolling hinzu?
Maxim Strutinskiy
139

Ohne Animation können Sie einfaches JS verwenden:

scroll(0,0)

Überprüfen Sie mit der Animation Nicks Antwort .

Ionuț Staicu
quelle
4
Wird dies in allen Browsern unterstützt?
Pacerier
1
scrollbefindet sich im CSSOM-Standard, während er scrollToursprünglich in DOM Level 0 definiert wurde und nicht Teil eines Standards ist. CSSOM enthält jedoch aus Gründen der scrollToAbwärtskompatibilität.
Clint Pachl
3
Ich denke, scrollwird weitgehend unterstützt. Siehe stackoverflow.com/q/1925671/41906
Clint Pachl
Vielen Dank. Ich denke, das window && window.scroll(0,0);ist in meinem Ansichtsmodell akzeptabel.
Nrodic
34

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

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

sollte den Trick machen.

Silkster
quelle
13

Sie könnten es ohne Javascript tun und einfach Ankertags verwenden? Dann wäre es für js kostenlos zugänglich.

Obwohl Sie Modalitäten verwenden, ist es Ihnen vermutlich egal, ob Sie frei sind. ;)

S.Kiers
quelle
1
Die Verwendung von Ankertags würde die Hash-basierte Navigation unterbrechen.
Tom Landau
2 

// 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>
Erweitern Sie das Snippet

Waruna Manjula
quelle
2

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

Plain JS: window.scrollTop=0;

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

Josh Powlison
quelle
1

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

Gary
quelle
0

Reine Javascript- Lösung

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

Wenn Sie einen reibungslosen Bildlauf wünschen 

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