¿Cómo desplazarse al principio de la página con JavaScript / jQuery?

¿Hay alguna manera de controlar el desplazamiento del navegador con JavaScript / jQuery?

Cuando desplazo mi página hasta la mitad, luego acciono una recarga, quiero que la página vaya a la parte superior, pero en su lugar trata de encontrar la última posición de desplazamiento. Entonces hice esto:

$('document').ready(function() {
   $(window).scrollTop(0);
});

Pero sin suerte.

EDITAR :

Así que ambas respuestas funcionaron cuando las llamo después de que se carga la página. Gracias. Sin embargo, si solo actualizo la página, parece que el navegador calcula y se desplaza a su posición de desplazamiento anterior DESPUÉS del .readyevento (también probé la función onload () del cuerpo).

Entonces, el seguimiento es, ¿hay alguna manera de PREVENIR que el navegador se desplace a su posición anterior o volver a desplazarse a la parte superior DESPUÉS de que haga lo suyo?

Wow, llego 9 años tarde a esta pregunta. Aqui tienes:

Agregue este código a su carga.

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

history.scrollRestoration Soporte del navegador:

Chrome: compatible (desde 46)

Firefox: compatible (desde 46)

IE / Edge: no compatible (aún ..)

Opera: compatible (desde 33)

Safari: compatible

Para IE / Edge si desea volver a desplazarse hacia la parte superior DESPUÉS de que se desplaza automáticamente hacia abajo, esto funcionó para mí:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

Cross-browser, solución pura de JavaScript:

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

Usted casi lo consiguió - que necesita para establecer el scrollTopsobre body, no window:

$(function() {
   $('body').scrollTop(0);
});

EDITAR:

Tal vez pueda agregar un ancla en blanco en la parte superior de la página:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

¿Hay alguna manera de PREVENIR que el navegador se desplace a su posición anterior o volver a desplazarse a la parte superior DESPUÉS de que haga lo suyo?

La siguiente solución jquery funciona para mí:

$(window).unload(function() {
    $('body').scrollTop(0);
});

Aquí hay una versión de desplazamiento animado JavaScript puro para no-jQuery'ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Y entonces:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

ACTUALIZAR

Ir a la parte superior de la página con un efecto de desplazamiento es un poco más fácil en JavaScript ahora con:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

PRECAUCIÓN

Hemos estado usando esto en nuestros proyectos más recientes, pero acabo de revisar el documento de Mozilla en este momento mientras actualizo mi respuesta y creo que se ha actualizado. En este momento el método es window.scroll(x-coord, y-coord)y no menciona ni muestra ejemplos que utilizan el objectparámetro donde se puede establecer el behaviora smooth. Acabo de probar el código y todavía funciona en Chrome y Firefox y el parámetro objeto todavía está en la especificación .

Así que use esto con precaución o puede usar este Polyfill . Aparte de desplazarse a la parte superior, esta polyfill también se ocupa de otros métodos: window.scrollBy, element.scrollIntoView, etc.

ANTIGUA RESPUESTA

Esta es nuestra javascriptimplementación de vainilla . Tiene un efecto de alivio simple para que el usuario no se sorprenda después de hacer clic en el botón Arriba .

Es muy pequeño y se vuelve aún más pequeño cuando se minifica. Los desarrolladores que buscan una alternativa al método jquery pero quieren los mismos resultados pueden intentarlo.

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

¡Salud!

Esto funciona para mi:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Utiliza un corto setTimeoutdentro del onloadpara dar al navegador la oportunidad de hacer el desplazamiento.

Puedes usar con jQuery

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

Use la siguiente función

window.scrollTo(xpos, ypos)

Aquí se requiere xpos. La coordenada para desplazarse, a lo largo del eje x (horizontal), en píxeles

Ypos también es obligatorio. La coordenada para desplazarse, a lo largo del eje y (vertical), en píxeles

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

Utilizar este

El siguiente código funciona en Firefox, Chrome y Safari , pero no pude probar esto en Internet Explorer. ¿Alguien puede probarlo y luego editar mi respuesta o comentarlo?

$(document).scrollTop(0);

Mi solución Javascript pura (animada):

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Explicación:

window.scrollY es una variable mantenida por el navegador de la cantidad de píxeles desde la parte superior por la que se ha desplazado la ventana.

window.scrollTo(x,y) es una función que desplaza la ventana una cantidad específica de píxeles en el eje xy en el eje y.

Por lo tanto, window.scrollTo(0,window.scrollY-20)mueve la página 20 píxeles hacia la parte superior.

El setTimeoutllama a la función de nuevo en 10 milisegundos para que entonces podemos moverlo otros 20 pixeles (animados), y los ifcontroles de los estados si todavía tenga que desplazarse.

¿Por qué no usas algún elemento de referencia al principio de tu archivo html, como

<div id="top"></div>

y luego, cuando se carga la página, simplemente haz

$(document).ready(function(){

    top.location.href = '#top';

});

Si el navegador se desplaza después de que se active esta función, simplemente haga

$(window).load(function(){

    top.location.href = '#top';

});

Desplazamiento entre navegadores hacia arriba:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

Desplazamiento entre navegadores a un elemento con id = div_id:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

Para responder a su pregunta editada, puede registrar el onscrollcontrolador de la siguiente manera:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Esto hará que el primer intento de desplazamiento (que probablemente sea el automático realizado por el navegador) se cancele efectivamente.

Si estás en modo peculiar (gracias @Niet the Dark Absol):

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

Si estás en modo estricto:

document.documentElement.scrollTop = 0;

No hay necesidad de jQuery aquí.

Esto esta funcionando:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

En mi caso el cuerpo no funcionó:

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

Pero HTML funcionó:

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

La combinación de estos dos me ayudó. Ninguna de las otras respuestas me ayudó, ya que tenía un sidenav que no se desplazaba.

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

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

}, 15);

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

sin animación, solo scroll(0, 0)(vanilla JS)

Si alguien está usando un diseño angular y material con sidenav. Esto lo enviará a la parte superior de la página:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Seeint el hash debería hacer el trabajo. Si tiene un encabezado, puede usar

window.location.href = "#headerid";

de lo contrario, el # solo funcionará

window.location.href = "#";

Y a medida que se escribe en la URL, se mantendrá si actualiza.

De hecho, el evento no necesita JavaScript para eso si desea hacerlo en un evento onclick, simplemente debe poner un enlace alrededor de su elemento y darle # como href.

Primero agregue una etiqueta de anclaje en blanco al lugar donde desea ir

<a href="#topAnchor"></a> 

Ahora agregue una función en la sección de encabezado

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

finalmente agregue un evento de carga a la etiqueta del cuerpo

<body onload="GoToTop()">

Una versión genérica que funciona para cualquier valor X e Y, y es igual que la api window.scrollTo, solo con la adición de scrollDuration.

* Una versión genérica que coincide con la API del navegador window.scrollTo **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

Recuerdo haber visto esto publicado en otro lugar (no pude encontrar dónde), pero esto funciona muy bien:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

Es extraño, pero la forma en que funciona se basa en la forma en que funciona la cola de pila de JavaScript. La explicación completa se encuentra aquí en la sección Cero retrasos.

La idea básica es que el tiempo setTimeoutno especifica realmente la cantidad de tiempo establecida que esperará, sino la cantidad mínima de tiempo que esperará. Entonces, cuando le dice que espere 0 ms, el navegador ejecuta todos los demás procesos en cola (como desplazar la ventana al lugar donde estuvo por última vez) y luego ejecuta la devolución de llamada.

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>