¿Desplazarse hasta la parte superior de la página con JavaScript?
¿Cómo me desplazo hasta la parte superior de la página usando JavaScript? La barra de desplazamiento que salta instantáneamente a la parte superior de la página también es deseable, ya que no estoy buscando lograr un desplazamiento suave.
preguntado el 17 de julio de 09 a las 14:07
KingNestor
30 Respuestas
Si no necesita el cambio para animar, entonces no necesita usar ningún complemento especial, solo usaría el JavaScript nativo window.scrollTo() método - pasando 0, 0 desplazará la página hacia la parte superior izquierda al instante.
window.scrollTo(xCoord, yCoord);
parámetros
- xCoord es el píxel a lo largo del eje horizontal.
- yCoord es el píxel a lo largo del eje vertical.
Respondido el 04 de enero de 21 a las 03:01
Ese era mi punto, si no necesita animar un desplazamiento suave, entonces no necesita usar jQuery. - daniellmb
Honestamente, el comentario de Jeff es divertido para las personas que solo quieren que las cosas funcionen en todos los navegadores el 95% del tiempo deberían usar jQuery. Esto proviene de alguien que tiene que escribir mucho javascript puro en este momento porque no podemos permitirnos la sobrecarga de una biblioteca que ralentiza el código del anuncio :( - Testamento
Esta respuesta no tiene nada que ver con la pregunta. Estaría bien si la pregunta fuera: ¿Qué secuencia de comandos y métodos debo usar para desplazarme hasta la parte superior de la página? La respuesta correcta está aquí: stackoverflow.com/questions/4147112/… - skobaljic
Trabajando para mí en Firefox 40 y Chrome 44 (para abordar el comentario de Mikhail) - tony
Desplazarse hasta la parte inferior de la página window.scrollTo(0, document.body.scrollHeight); - emix
Si desea un desplazamiento suave, intente algo como esto:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Eso tomará cualquier <a> etiqueta cuyo href="#top" y haz que sea suave, desplázate hasta la parte superior.
respondido 17 mar '11, 23:03
+1. Me preguntaba cómo hacer algo como esto y Google me llevó aquí. Sin embargo, pregunta, ¿dónde está la función "scrollTop" en los documentos? Solo miré pero no pude encontrarlo. - cuadrado
scrollTop no es una función, es una propiedad del elemento de ventana - Jalal El Shaer
Esto no funciona correctamente cuando se usa la devolución de llamada completa de animate, ya que lo ejecutará dos veces. - David Morales
"html" y "body" son necesarios para la compatibilidad del navegador, es decir, Chrome v27 se desplaza solo con "body" y IE8 no. IE8 se desplaza con solo "html", pero Chrome v27 no. - SushiGuy
@jalchr En realidad, window.pageYOffset sería la propiedad del objeto ventana e̶l̶e̶m̶e̶n̶t̶. - alex w
Prueba esto para desplazarte hacia arriba
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
respondido 01 mar '17, 13:03
esto es lo mismo: if ('scrollRestoration' en el historial) {history.scrollRestoration = 'manual'; } - vasilii suricov
¡Quién diría que era así de simple! Gracias :) - CJ Broersma
Mejor solución con animación fluida:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
Respondido 23 Oct 18, 12:10
Es posible que aún necesite soporte de polyfill para ScrollOptions (para ciertos navegadores): github.com/iamdustan/smoothscroll - jneuendorf
Me gusta mucho esta solución. - SuperManEver
¿Alguien puede probar esto en Safari o Internet Explorer y ver si funciona bien? Gracias - Fabio Magarelli
@FabioMagarelli Está funcionando bien en Safari, no probado en IE. Para su información, para probarlo en safari, abra cualquier página que tenga desplazamiento y copie y pegue el código anterior en Herramientas de desarrollo -> Consola, se desplazará hasta la parte superior verificada (Versión de Safari 13.0.5). - Ganesh Ghalame
No necesitas jQuery para hacer esto. Una etiqueta HTML estándar será suficiente ...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
Respondido 17 Jul 09, 19:07
+1 Esto es bueno si necesita navegar a un elemento específico en lugar de solo a la parte superior. - ish
Utilice ' Arriba ' para saltar al principio de la página. - Bakanekobrain
Este parece ser el mejor camino a seguir cuando se trata de SPA: Phil
¡Lindo! ¿Hay alguna manera de hacer que el desplazamiento sea suave? - estancamientoUno
Esto no funcionará si llama a otro botón usando getElementById en medio de una página. - jim o.
Todas estas sugerencias funcionan muy bien para diversas situaciones. Para aquellos que encuentran esta página a través de una búsqueda, también se puede dar este un intento. JQuery, sin complemento, desplácese hasta el elemento.
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
Respondido 23 Abr '12, 10:04
desplazamiento suave, javascript puro:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
contestado el 29 de mayo de 15 a las 11:05
<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>
Edit:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Otra forma de desplazarse con margen superior e izquierdo:
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });
Respondido el 13 de diciembre de 19 a las 06:12
¿Estás seguro de que funciona la duración como cadena en la función animada? - yogesh
No puede usar una cadena durante la duración del animate función, en su lugar deberías usar: $('html, body').animate({scrollTop:(scroll_pos)}, 2000); - Kenny Alvizuris
¿Qué sentido tiene poner 0 entre paréntesis? ((0)) simplemente se evaluará a 0. - frasco de jack
Sí @ Jack, puedes. - kamlesh
Realmente extraño: esta pregunta está activa desde hace cinco años y todavía no hay una respuesta de JavaScript vainilla para animar el desplazamiento ... Así que aquí tienes:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
Si lo desea, puede envolver esto en una función y llamarlo a través del onclick atributo. Mira esto jsFiddle
Nota: esta es una solución muy básica y tal vez no sea la más eficaz. Un ejemplo muy elaborado se puede encontrar aquí: https://github.com/cferdinandi/smooth-scroll
Respondido 02 Oct 14, 11:10
Sin embargo, la pregunta pide explícitamente una solución jQuery. así que no es extraño - Testamento
La mejor solución para mi Sin complementos, sin biblioteca jquery voluminosa, solo javascript sencillo. Felicitaciones - user2840467
Hombre, también creé esta misma lógica XD después de 5 años, exactamente la misma lógica, solo los valores son diferentes, como el intervalo de tiempo y ese número entero que estamos usando para restar, no puedo creer XD. TBH, vine aquí para responder pero ya está allí, así que votó a favor de tu respuesta. - Germa Vinsmoke
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
en html
<a href="#top">go top</a>
Respondido 14 Feb 14, 16:02
Si desea hacer un desplazamiento suave, intente esto:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Otra solución es el método JavaScript window.scrollTo:
window.scrollTo(x-value, y-value);
Parámetros:
- El valor x es el píxel a lo largo del eje horizontal.
- El valor y es el píxel a lo largo del eje vertical.
Respondido el 11 de Septiembre de 17 a las 11:09
imitador ... ver las respuestas de los usuarios ... Esto es solo una compilación de las 2 respuestas principales .... - laurent b
esa es una forma legítima de usar stackoverflow; es más práctico tenerlo en un solo lugar. Joel Spolsky usó la reutilización de respuestas existentes como un ejemplo de cómo se supone que funciona stackoverflow en un punto. Si está interesado, puedo intentar encontrar la publicación del blog: edgar h
Debería mencionar que su primera solución requiere jQuery. - bot19
Con window.scrollTo(0, 0); es bien rapido
así que probé el ejemplo de Mark Ursino, pero en Chrome no pasa nada
y encontré esto
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});
probé los 3 navegadores y funciona
estoy usando blueprint css
esto es cuando un cliente hace clic en el botón "Reservar ahora" y no tiene el período de alquiler seleccionado, se mueve lentamente hacia la parte superior donde están los calendarios y abre un cuadro de diálogo que apunta a los 2 campos, después de 3 segundos se desvanece
Respondido el 24 de junio de 13 a las 13:06
Gracias por señalar que necesita orientar sus anuncios tanto a html como a body. Solo lo estaba haciendo para html y me preguntaba por qué no funcionaba en Chrome. - Jared
La animación del cuerpo funciona en Safari, así que actualizo tu respuesta en consecuencia. - Dave DuPlantis
"Probado los 3 navegadores"? Midori, LuaKit y Konqueror, ¿verdad?: P - Anko
¿Por qué no simplemente hacer $ ('html', 'body'). Animate ({scrollTop: 0}) en lugar de agregar dos líneas? - Matt Smith
A montón of usuarios recomiendo seleccionar las etiquetas html y body para la compatibilidad entre navegadores, así:
$('html, body').animate({ scrollTop: 0 }, callback);
Sin embargo, esto puede hacerte tropezar si estás contando con que tu devolución de llamada se ejecute solo una vez. De hecho, se ejecutará dos veces porque ha seleccionado dos elementos.
Si eso es un problema para usted, puede hacer algo como esto:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}
La razón por la que esto funciona es en Chrome. $('html').scrollTop() devuelve 0, pero no en otros navegadores como Firefox.
Si no desea esperar a que se complete la animación en el caso de que la barra de desplazamiento ya esté en la parte superior, intente esto:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
contestado el 23 de mayo de 17 a las 12:05
El viejo #top puede hacer el truco
document.location.href = "#top";
Funciona bien en FF, IE y Chrome
Respondido el 01 de diciembre de 14 a las 02:12
¡Lindo! ¿Hay alguna manera de hacer que el desplazamiento sea suave? - estancamientoUno
debe evitar las soluciones basadas en la navegación, consulte los comentarios sobre la respuesta de Sriramajeyam. - Andrés Grothe
Solución no jQuery / JavaScript puro:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Respondido el 30 de enero de 14 a las 16:01
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>Respondido 14 Jul 18, 08:07
Si bien este código puede responder a la pregunta, proporcionar información sobre cómo y por qué resuelve el problema mejora su valor a largo plazo: L_J
¡Explica tu respuesta! - Ullas Hunka
En la página web, cualquier usuario hará clic en el botón de desplazamiento superior y luego la página se desplazará hacia arriba con animación. - arvinda kumar
¿Por qué animate () en lugar de jquery scroll ()? - Akin Hwan
$(document).scrollTop(0); También funciona.
Respondido 31 Jul 12, 21:07
Tenga en cuenta que cuando no usa Firefox, esto no funcionará. Obtiene un error cuando solo proporciona un argumento (Error: No hay suficientes argumentos [nsIDOMWindow.scrollTo]). - Husky
Prueba esta
<script>
$(window).scrollTop(100);
</script>
Respondido el 01 de diciembre de 11 a las 06:12
Pruebe este código:
$('html, body').animate({
scrollTop: $("div").offset().top
}, time);
div => Dom Elemento donde desea mover el desplazamiento.
tiempo => milisegundos, define la velocidad del desplazamiento.
Respondido 08 ago 17, 08:08
Solución pura de JavaScript:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
Escribo una solución animada en Codepen
Además, puede probar otra solución con CSS scroll-behavior: smooth propiedad.
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
respondido 09 nov., 19:10
La solución equivalente en Mecanografiado puede ser como el siguiente
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
Respondido 20 Jul 20, 08:07
Su fragmento no tiene nada que ver con TypeScript y funciona perfectamente bien en Javascript. - François Noël
¿Por qué no usas la función incorporada de JQuery scrollTop:
$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom
¡Corto y sencillo!
respondido 20 mar '16, 09:03
Solo te falta el enlace al doctor - Cyril Duchon-Doris
No necesitas JQuery. Simplemente puedes llamar al script
window.location = '#'
al hacer clic en el botón "Ir al principio"
Demostración de muestra:
PD: No use este enfoque, cuando esté usando bibliotecas modernas como angularjs. Eso podría romper el hashbang de la URL.
Respondido 25 Jul 16, 16:07
Desafortunadamente, no es la mejor solución ya que está cambiando de ubicación físicamente en ese caso en lugar de desplazarse por la página. Eso podría causar problemas si la ubicación es importante (en caso de usar enrutamiento angular o algo así) - Yaroslav Rogoza
@YaroslavRogoza tiene razón. Mientras que puede trabajar en casos simples, no recomendaría esta solución. La ubicación se está volviendo cada vez más importante y las aplicaciones de una sola página utilizan ampliamente el hash para manejar la navegación. Inmediatamente introduciría un error de efecto secundario al agregar navegación basada en hash después de esto o esta a la navegación basada en hash. - Andrés Grothe
Simplemente use este script para desplazarse hacia arriba directamente.
<script>
$(document).ready(function(){
$("button").click(function(){
($('body').scrollTop(0));
});
});
</script>
Respondido el 27 de Septiembre de 17 a las 12:09
Si no desea un desplazamiento suave, puede hacer trampa y detener la animación de desplazamiento suave casi tan pronto como la inicie ... así:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});
No tengo idea de si está recomendado / permitido, pero funciona :)
¿Cuándo usarías esto? No estoy seguro, pero tal vez cuando quiera usar un clic para animar una cosa con Jquery, pero ¿hacer otra sin animación? es decir, abra un panel de inicio de sesión de administrador deslizable en la parte superior de la página y salte instantáneamente a la parte superior para verlo.
Respondido el 23 de junio de 14 a las 19:06
Motivación
Esta sencilla solución funciona de forma nativa e implementa un desplazamiento suave a cualquier posición.
Evita el uso de enlaces de anclaje (aquellos con #) que, en mi opinión, son útiles si desea vincular a una sección, pero no se sienten tan cómodos en algunas situaciones, especialmente cuando apuntan hacia arriba, lo que podría llevar a dos URL diferentes que apuntan a la misma ubicación (http://www.example.org y http://www.example.org/#).
Solución
Poner un id a la etiqueta a la que desea desplazarse, por ejemplo, su primera ., que responde a esta pregunta, pero el id podría colocarse en cualquier lugar de la página.
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
Luego, como botón, puede usar un enlace, simplemente edite el onclick atributo con un código como este.
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
Donde el argumento de document.getElementById es la id de la etiqueta a la que desea desplazarse después de hacer clic.
contestado el 09 de mayo de 18 a las 09:05
¡Gracias! es una gran solución - Hugo Stiven Laguna Rueda
@HugoStivenLagunaRueda de bienvenida, lo encontré en MDN, así que gracias a Mozilla. Es asombroso la cantidad de cosas que ya existen, soportadas de forma nativa. Me encanta Vanilla JS. - Gianluca Casati
Simplemente puede usar un objetivo de su enlace, como #someid, donde #someid es la identificación del div.
O bien, puede usar cualquier cantidad de complementos de desplazamiento que lo hagan más elegante.
http://plugins.jquery.com/project/ScrollTo es un ejemplo.
Respondido 17 Jul 09, 19:07
Puedes intentar usar JS como en este violín http://jsfiddle.net/5bNmH/1/
Agrega el botón "Ir al principio" en el pie de página de tu página:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>
Respondido 01 Feb 14, 19:02
function scrolltop() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#back-to-top').fadeIn(duration);
} else {
jQuery('#back-to-top').fadeOut(duration);
}
});
jQuery('#back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
}
respondido 21 nov., 14:21
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript scroll or haz tu propia pregunta.
2019, para evitar “Parece que este sitio utiliza un efecto de posicionamiento vinculado al desplazamiento. Es posible que esto no funcione bien con la panorámica asincrónica "use mi secuencia de comandos stackoverflow.com/a/57641938/5781320 - Constantin