Pregunta Prevenir el desplazamiento automático del navegador al actualizar


Si va a una página y se desplaza, actualice la página y la actualizará en el lugar donde la dejó. Esto es genial, sin embargo, esto también ocurre en las páginas donde hay una ubicación de anclaje en la url. Un ejemplo sería si hicieras clic en un enlace http://example.com/post/244#comment5 y refrescó la página después de mirar alrededor, no estaría en el ancla y la página saltaría. ¿Hay alguna forma de evitar esto con javascript? Para que no importa, lo que siempre navegarías hacia el ancla.


75
2017-08-12 03:35


origen


Respuestas:


Esta solución ya no se recomienda debido a cambios en el comportamiento del navegador. Ver otras respuestas

Básicamente, si se utiliza un ancla, nos vinculamos al evento de desplazamiento de Windows. La idea es que el primer evento de desplazamiento debe pertenecer al reposicionamiento automático realizado por el navegador. Cuando esto ocurre, hacemos nuestro propio reposicionamiento y luego eliminamos el evento enlazado. Esto evita que las siguientes páginas se desplacen por el sistema.

$(document).ready(function() {
    if (window.location.hash) { 
        //bind to scroll function
        $(document).scroll( function() {
            var hash = window.location.hash
            var hashName = hash.substring(1, hash.length);
            var element;

            //if element has this id then scroll to it
            if ($(hash).length != 0) {
                element = $(hash);
            }
            //catch cases of links that use anchor name
            else if ($('a[name="' + hashName + '"]').length != 0)
            {
                //just use the first one in case there are multiples
                element = $('a[name="' + hashName + '"]:first');
            }

            //if we have a target then go to it
            if (element != undefined) {
                window.scrollTo(0, element.position().top);
            }
            //unbind the scroll event
            $(document).unbind("scroll");
        });
    }

});

15
2017-08-12 04:46



En Chrome, incluso si fuerza scrollTop a 0, saltará después del primer evento de desplazamiento.

Debes unir el desplazamiento a esto:

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

Entonces, se engaña al navegador para que crea que estaba en el comienzo antes de la actualización.


126
2017-09-05 10:30



Para deshabilitar la restauración automática de desplazamiento simplemente agregue esta etiqueta a la sección de encabezado.

<script>history.scrollRestoration = "manual"</script>

No es compatible con IE. Compatibilidad con el navegador


22
2017-10-13 04:42



Después de varias fallas finalmente logré hacer el truco. anzo es correcto aquí como el uso beforeunload hará que la página salte a la cima cuando un usuario vuelve a cargar la página o hace clic en un enlace. Asi que unload es la forma clara de hacer esto.

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

Forma Javascript (Gracias ProfNandaa)

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

EDITAR: 16/07/2015

El problema del salto todavía está allí con Firefox, incluso con unload evento.


15
2017-07-06 12:47



Puedes poner un # al final para que la página se cargue en la parte superior.

Funciona en todos los navegadores, dispositivos móviles y computadoras de escritorio, porque es muy simple.

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

});

// Esto carga la página con un # al final.


3
2017-08-18 09:59



Aquí hay un enfoque más general. En lugar de tratar de evitar que el navegador se desplace (o saltar a la cima como se vería), simplemente restauro la posición anterior en la página. Es decir. Estoy grabando el desplazamiento en y de la página en localStorage y me desplazo a esta posición una vez que la página se ha cargado.

function storePagePosition() {
  var page_y = window.pageYOffset;
  localStorage.setItem("page_y", page_y);
}


window.addEventListener("scroll", storePagePosition);


var currentPageY;

try {
  currentPageY = localStorage.getItem("page_y");

  if (currentPageY === undefined) {
    localStorage.setItem("page_y") = 0;
  }

  window.scrollTo( 0, currentPageY );
} catch (e) {
    // no localStorage available
}

2
2018-03-05 15:25



Deberias ser capaz de.

Onload, verificar si window.location.hash tiene un valor Si lo hace, toma el elemento con una identificación que coincida con el valor hash. Encuentre la posición del elemento (llamadas recursivas a offsetTop / offsetLeft) y luego pase esos valores al window.scrollTo(x, y) método.

Esto debería desplazar la página al elemento deseado.


-1
2017-08-12 03:44