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?

— Exitos
fuente

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