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

Question

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 hacia arriba usando jQuery?

Answer 1

Puede configurar el scrollTop, así:

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

O si quieres un poco de animación en lugar de un broche de presión a la parte superior:

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

Answer 2

Sin animación, puede utilizar llanura JS :

scroll(0,0) 

Con animación, marque la respuesta de Nick.

Answer 3

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

aunque como usas modales, asumo que no te importa ser js libre. ;)

Answer 4

Si está utilizando el diálogo de la interfaz de usuario de jQuery, puede simplemente modelar el modal para que aparezca con la posición fija en la ventana para que no se salga de la vista, anulando la necesidad de desplazarse. De lo contrario,

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

debería hacer el truco.

Answer 5

si está utilizando el cuadro de diálogo de la interfaz de usuario de jQuery, puede simplemente configurar el modal para que aparezca con la posición fija en la ventana para que no se salga de la vista, anulando la necesidad de desplazarse. Otro

Answer 6

// 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>