Cómo saltar a la parte superior de la página del navegador

186

Estoy escribiendo una ventana emergente modal y necesito que el navegador salte a la parte superior de la pantalla cuando se presiona el botón modal abierto. ¿Hay alguna manera de desplazar el navegador a la parte superior usando jQuery?

javascript jquery css modal-dialog Exitos
fuente

Respuestas:

405

Puede configurar el scrollTop, así:

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

O si desea una pequeña animación en lugar de un ajuste a la parte superior:

$('html, body').animate({ scrollTop: 0 }, 'fast');
Nick Craver
fuente
1
buena ... He usado scrollTo plug-in para jQuery antes de lograr esto - podría haber ahorrado un poco de código con el número ... gracias por la lección ;-)
Zathrus escritor
@MikhailBatcer: deshabilite su CSS y luego vea si funciona. Es posible que tenga un problema con la forma en que ha diseñado sus etiquetas htmly body. de lo contrario, use $(window)en su lugar.
Invot
¿Cómo agregar duración para el skrolling de animación?
Maxim Strutinskiy
139

Sin animación, puede usar JS simple:

scroll(0,0)

Con animación, verifique la respuesta de Nick .

Ionuț Staicu
fuente
44
¿Es compatible con todos los navegadores?
Pacerier
1
scrollestá en el estándar CSSOM mientras scrollTose definió originalmente en DOM Nivel 0 y no forma parte de ningún estándar. Sin embargo, CSSOM incluye scrollTocompatibilidad con versiones anteriores.
Clint Pachl
3
Creo que scrolles ampliamente compatible. Ver stackoverflow.com/q/1925671/41906
Clint Pachl
Gracias. Supongo que window && window.scroll(0,0);es aceptable en mi modelo de vista.
nrodic
34

Si está utilizando el cuadro de diálogo de jQuery UI, puede simplemente diseñar el modal para que aparezca con la posición fija en la ventana para que no aparezca fuera de la vista, negando la necesidad de desplazarse. De otra manera,

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

debería hacer el truco.

Silkster
fuente
13

¿Podría hacerlo sin javascript y simplemente usar etiquetas de anclaje? Entonces sería accesible para esos js gratis.

aunque como estás usando modales, supongo que no te importa ser libre. ;)

S.Kiers
fuente
1
El uso de etiquetas de anclaje interrumpiría la navegación basada en hash.
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>
Expandir fragmento

Waruna Manjula
fuente
2

Sé que esto es viejo, pero para aquellos que tienen problemas en Edge:

JS simple: window.scrollTop=0;

Lamentablemente, scroll()y scrollTo()arrojar errores en Edge.

Josh Powlison
fuente
1

está utilizando el cuadro de diálogo de jQuery UI, simplemente puede diseñar el modal para que aparezca con la posición fija en la ventana para que no aparezca fuera de la vista, negando la necesidad de desplazarse. Otro

Gary
fuente
0

Solución Javascript pura

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

Si quieres un desplazamiento suave 

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