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


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 abrir modal. ¿Hay alguna forma de desplazar el navegador a la parte superior usando jQuery?

Author: jball, 2010-11-10

7 answers

Puedes establecer el scrollTop, así:

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

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

$('html, body').animate({ scrollTop: 0 }, 'fast');
 353
Author: Nick Craver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-25 20:41:59

Sin animación, puede usar JS simple:

scroll(0,0)

Con animación, comprueba la respuesta de Nick.

 114
Author: Ionuț Staicu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-10 17:22:49

Si está utilizando el diálogo de interfaz de usuario de jQuery, solo puede darle estilo al 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 lo contrario,

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

Debería hacer el truco.

 29
Author: Silkster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-10 18:44:30

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

Aunque como estás usando modales, asumo que no te importa ser libre de js. ;)

 13
Author: S.Kiers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-10 17:58:01

Está utilizando el diálogo de interfaz de usuario de jQuery, solo podría estilizar el modal para que aparezca con la posición fija en la ventana para que no aparezca fuera de vista, negando la necesidad de desplazarse. Los demás

 1
Author: gary,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-08 12:10:13

// 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
Author: Waruna Manjula,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-17 02:45:53

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

JS simple: window.scrollTop=0;

Desafortunadamente, scroll() y scrollTo() lanzan errores en Edge.

 1
Author: Josh Powlison,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-19 12:53:17