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

¿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.

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.

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.

Prueba esto para desplazarte hacia arriba

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

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

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>

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);

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));
    }
})();

<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' });

<script>

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

en html

<a href="#top">go top</a>

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

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.

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

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();
}

Los viejos #toppueden hacer el truco

document.location.href = "#top";

Funciona bien en FF, IE y Chrome

Prueba esto

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

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

Solución no jQuery / JavaScript puro:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Esto funcionará:

window.scrollTo(0, 0);

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.

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;
    }
}

¿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!

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.

Simplemente use este script para desplazarse hacia arriba directamente.

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

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.

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.

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.

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>

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;
    });
}

Ninguna de las respuestas anteriores funcionará en SharePoint 2016.

Tiene que hacerse así: /sharepoint/195870/

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