Desplácese hasta la parte superior de la página con JavaScript?

1594

¿Cómo me desplazo a la parte superior de la página usando un JavaScript? Es deseable incluso si la barra de desplazamiento salta instantáneamente a la parte superior. No estoy buscando un desplazamiento suave.

ReyNestor
fuente
2019, para evitar “Este sitio parece usar un efecto de posicionamiento vinculado por desplazamiento. Puede que esto no funcione bien con la panorámica asincrónica ”, use mi script stackoverflow.com/a/57641938/5781320
Constantin el

Respuestas:

2173

Si no necesita el cambio para animar, entonces no necesita usar ningún complemento especial; solo usaría la ventana nativa de JavaScript. .

window.scrollTo(x-coord, y-coord);

Parámetros

  • x-coord es el píxel a lo largo del eje horizontal.
  • y-coord es el píxel a lo largo del eje vertical.
daniellmb
fuente
176
Ese fue mi punto, si no necesita animar el desplazamiento suave, entonces no necesita usar jQuery.
daniellmb
23
Divertido como el comentario de Jeff es honestamente para las personas que solo quieren que las cosas funcionen entre navegadores el 95% del tiempo solo deben usar jQuery. Esto viene 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 de anuncios :(
Será el
11
Esta respuesta no tiene nada que ver con la pregunta. Estaría bien si la pregunta fuera: ¿Qué script y métodos debo usar para desplazarme hacia la parte superior de la página? La respuesta correcta está aquí: stackoverflow.com/questions/4147112/…
skobaljic
2
Trabajando para mí en Firefox 40 y Chrome 44 (para abordar el comentario de Mikhail)
tony
10
Desplácese hasta el final de la páginawindow.scrollTo(0, document.body.scrollHeight);
emix
1347

Si quieres un desplazamiento suave, prueba 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 hará que se desplace suavemente hacia la parte superior.

Mark Ursino
fuente
+1. Me preguntaba cómo hacer algo como esto y google me llevó aquí. Pregunta, sin embargo, ¿dónde está la función "scrollTop" en los documentos? Solo miré pero no pude encontrarlo.
sqram
22
scrollTop no es función, es una propiedad del elemento de ventana
Jalal El-Shaer
1
Esto no funciona correctamente cuando se utiliza la devolución de llamada completa de animate, ya que lo ejecutará dos veces.
David Morales
55
"html" y "body" son necesarios para la compatibilidad del navegador, es decir, Chrome v27 se desplaza con solo "body" y IE8 no. IE8 se desplaza con solo "html" pero Chrome v27 no.
SushiGuy
1
@jalchr En realidad, window.pageYOffsetsería propiedad de la ventana e̶l̶e̶m̶e̶n̶t̶ objeto.
Alex W
176

Prueba esto para desplazarte hacia arriba

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
mehmood
fuente
esto es lo mismo: if ('scrollRestoration' en el historial) {history.scrollRestoration = 'manual'; }
Vasilii Suricov
123

Mejor solución con animación suave:

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

Ganesh Ghalame
fuente
Es posible que aún necesite rellenar el soporte 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
1
@FabioMagarelli Funciona 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 para desarrolladores -> Consola, se desplazará a la parte superior verificada (Safari Versión 13.0.5).
Ganesh Ghalame
104

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>
Mateo
fuente
12
+1 Esto es bueno si necesita navegar a un elemento específico en lugar de ir a la parte superior.
Ish
38
Use '<a href="#"> Arriba </a>' para saltar a la parte superior de la página.
Bakanekobrain
3
Este parece ser el mejor camino a seguir cuando se trata de SPA
Phil
¡Agradable! ¿Hay alguna manera de hacer que el desplazamiento sea suave?
stallingOne
65

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 a este un intento. JQuery, sin plug-in, desplácese al elemento.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);
D.Alexander
fuente
47

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));
    }
})();
despertar-neo
fuente
31
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Editar:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Otra forma de desplazamiento con el margen superior e izquierdo:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });
Kamlesh
fuente
44
¿Estás seguro de que la duración como cadena en la función animada funciona?
yogesh
No puede usar una cadena durante la duración de la animatefunción, en su lugar debe usar: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Kenny Alvizuris
1
¿Cuál es el punto de envolver 0 entre paréntesis? ((0)) simplemente se evaluará a 0.
Jack Vial
Sí @Jack, puedes.
Kamlesh
29
<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

en html

<a href="#top">go top</a>
hasancse016
fuente
28

Realmente extraño: esta pregunta está activa durante cinco años y todavía no hay una respuesta JavaScript de 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 ajustar esto en una función y llamarlo a través del onclickatributo. Mira este jsfiddle

Nota: Esta es una solución muy básica y quizás no sea la más eficaz. Un ejemplo muy elaborado se puede encontrar aquí: https://github.com/cferdinandi/smooth-scroll

AvL
fuente
66
Sin embargo, la pregunta pide explícitamente una solución jQuery. así que no es extraño
Will
2
La mejor solución para mi. No hay complementos, no hay una biblioteca voluminosa de jQuery, simplemente JavaScript. Felicitaciones
usuario2840467
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 entero que estamos usando para restar, no puedo creer XD. TBH, vine aquí para responder pero ya está allí, así que voté tu respuesta.
Germa Vinsmoke
27

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.
Gaurang Sondagar
fuente
77
copycat ... 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 stackoverflow debe funcionar en un punto. Si está interesado, puedo intentar encontrar la publicación del blog
Edgar H
26

Con window.scrollTo(0, 0);es muy rápido,
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 seleccionado el período de alquiler, 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

Luiggi ZAMOL
fuente
Gracias por indicarnos que necesita apuntar tanto a html como a body. Solo lo hacía para html y me preguntaba por qué no funcionaba en Chrome.
Jared
La animación del cuerpo funciona en Safari, por lo que estoy actualizando su respuesta en consecuencia.
Dave DuPlantis
46
"Probado los 3 navegadores "? Midori, LuaKit y Konqueror, ¿verdad? : p
Anko
14
¿Por qué no simplemente hacer $ ('html', 'body'). Animate ({scrollTop: 0}) en lugar de agregar dos líneas?
Matt Smith
23

Una gran cantidad de usuarios recomienda seleccionar tanto las etiquetas HTML y el cuerpo de la compatibilidad entre navegadores, así:

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

Sin embargo, esto puede hacer que te tropieces si cuentas 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 que Chrome $('html').scrollTop()devuelve 0, pero no en otros navegadores como Firefox.

Si no desea esperar a que se complete la animación en 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();
}
Big McLargeHuge
fuente
19

Los viejos #toppueden hacer el truco

document.location.href = "#top";

Funciona bien en FF, IE y Chrome

pollirrata
fuente
¡Agradable! ¿Hay alguna manera de hacer que el desplazamiento sea suave?
stallingOne
debe evitar las soluciones basadas en navegación, vea los comentarios sobre la respuesta de Sriramajeyam.
Andrew Grothe
15

$(".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>

arvinda kumar
fuente
3
Si bien este código puede responder 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á en la parte superior con animación.
arvinda kumar
¿Por qué animar () en lugar de jquery scroll ()?
Akin Hwan
14

Prueba esto

<script>
    $(window).scrollTop(100);
</script>
Renjith
fuente
14

$(document).scrollTop(0); También funciona.

Hari Ganesan
fuente
2
Tenga en cuenta que cuando no usa Firefox esto no funcionará. Obtiene un error cuando solo da un argumento (Error: No hay suficientes argumentos [nsIDOMWindow.scrollTo]).
Husky
14

Solución no jQuery / JavaScript puro:

document.body.scrollTop = document.documentElement.scrollTop = 0;
tfont
fuente
14

Esto funcionará:

window.scrollTo(0, 0);

Santosh Jadi
fuente
3
Esta fue la mejor respuesta
OG Sean
10

Prueba este código:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Elemento Dom donde desea mover el desplazamiento.

tiempo => milisegundos, define la velocidad del desplazamiento.

Wasif Ali
fuente
9

Solución de JavaScript puro:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Escribo una solución animada en Codepen

Además, puede probar otra solución con la scroll-behavior: smoothpropiedad CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
Saeed Hassanvand
fuente
8

¿Por qué no utiliza la función incorporada JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Corto y simple!

Sandeep Gantait
fuente
Solo te falta el enlace al documento
Cyril Duchon-Doris
8

No necesitas JQuery. Simplemente puedes llamar al guión

window.location = '#'

al hacer clic en el botón "Ir al principio"

Demo de muestra:

output.jsbin.com/fakumo#

PD: No uses este enfoque cuando uses bibliotecas modernas como angularjs. Eso podría romper el hashbang de URL.

Sriramajeyam Sugumaran
fuente
99
Desafortunadamente, no es la mejor solución ya que está cambiando físicamente la ubicación 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 utilizar el enrutamiento angular más o menos)
Yaroslav Rogoza
2
@YaroslavRogoza es correcto. Si bien puede funcionar 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 esto a la navegación basada en hash.
Andrew Grothe
8

Simplemente use este script para desplazarse hacia arriba directamente.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>
Gayashan Perera
fuente
7

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 es recomendado / permitido, pero funciona :)

¿Cuándo usarías esto? No estoy seguro, pero tal vez cuando quieras 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.

Jon Story
fuente
6

Motivación

Esta solución simple 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 son tan cómodos en algunas situaciones, especialmente cuando apunta hacia arriba, lo que podría conducir a dos URL diferentes que apuntan a la misma ubicación ( http://www.example.org y http://www.example.org/# ).

Solución

Coloque una identificación en la etiqueta a la que desea desplazarse, por ejemplo, su primera sección , que responde a esta pregunta, pero la identificación podría colocarse en todas partes 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 atributo onclick 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.getElementByIdes la identificación de la etiqueta a la que desea desplazarse después de hacer clic.

Gianluca Casati
fuente
¡Gracias! es una gran solución
Hugo Stiven Laguna Rueda
@HugoStivenLagunaRueda de nada, lo encontré en MDN, así que gracias a Mozilla. Es increíble la cantidad de cosas que ya existen, con soporte nativo. Me encanta la vainilla JS.
Gianluca Casati
5

Simplemente puede usar un objetivo desde 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.

ScottE
fuente
4

Puede intentar usar JS como en este Fiddle http://jsfiddle.net/5bNmH/1/

Agregue el botón "Ir al principio" en el pie de página:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>
asertym
fuente
4
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;
    });
}
Mardzis
fuente
4

Ninguna de las respuestas anteriores funcionará en SharePoint 2016.

Tiene que hacerse así: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
jeancallisti
fuente