javascript - recargar - Prevenir el desplazamiento automático del navegador al actualizar

recargar pagina despues de enviar formulario

Question

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 hace clic en un enlace http://example.com/post/244#comment5 y actualiza 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.

Answer 1

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 registrando el desplazamiento y actual 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
}

Answer 2

Deberias ser capaz de.

Onload, comprueba 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 método window.scrollTo(x, y) .

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

Answer 3

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

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

ProfNandaa 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 el evento de unload .

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

Tenga en cuenta que esto ya no parece funcionar en Chrome. La respuesta de José parece ser la mejor solución actual. Dejo esta respuesta intacta para referencia.

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

});