javascript - scrollintoview - ¿Cómo puedo actualizar window.location.hash sin saltar el documento?

smooth scroll bootstrap 4

Question

Tengo un panel deslizante configurado en mi sitio web.

Cuando terminó de animar, configuré el hash como tal

function() {
   window.location.hash = id;
}

(esta es una devolución de llamada, y la id se asigna antes).

Esto funciona bien, para permitir que el usuario marque como favorito el panel, y también para que funcione la versión sin JavaScript.

Sin embargo, cuando actualizo el hash, el navegador salta a la ubicación. Supongo que este es el comportamiento esperado.

Mi pregunta es: ¿cómo puedo evitar esto? Es decir, ¿cómo puedo cambiar el hash de la ventana, pero no hacer que el navegador se desplace al elemento si existe el hash? Algún tipo de event.preventDefault() tipo de cosa?

Estoy usando jQuery 1.4 y el plugin scrollTo .

¡Muchas gracias!

Actualizar

Aquí está el código que cambia el panel.

$(''#something a'').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $(''#slider'').scrollTo(id, 800, {
        onAfter: function() {

            link.parents(''li'').siblings().removeClass(''active'');
            link.parent().addClass(''active'');
            window.location.hash = id;

            }
    });
});

Answer 1

¿Por qué no obtienes la posición de desplazamiento actual, la colocas en una variable, luego asignas el hash y vuelves a colocar la página donde estaba?

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

Esto debería funcionar

Answer 2

El problema es que está configurando window.location.hash en el atributo de ID de un elemento. Es el comportamiento esperado para el navegador saltar a ese elemento, independientemente de si "previene Default ()" o no.

Una forma de evitar esto es prefijar el hash con un valor arbitrario como ese:

window.location.hash = ''panel-'' + id.replace(''#'', '''');

Entonces, todo lo que necesita hacer es verificar el hash prefijado en la carga de la página. Como una ventaja adicional, incluso puedes desplazarte sin problemas desde ella, ya que ahora tienes el control del valor hash ...

$(function(){
    var h = window.location.hash.replace(''panel-'', '''');
    if (h) {
        $(''#slider'').scrollTo(h, 800);
    }
});

Si necesita que esto funcione en todo momento (y no solo en la carga de la página inicial), puede usar una función para monitorear los cambios al valor de hash y saltar al elemento correcto sobre la marcha:

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace(''panel-'', '''');
    if (h && h !== foundHash) {
        $(''#slider'').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

Answer 3

Esta solución funcionó para mí.

El problema con la configuración de location.hash es que la página saltará a esa identificación si se encuentra en la página.

El problema con window.history.pushState es que agrega una entrada al historial de cada pestaña en la que el usuario hace clic. Luego, cuando el usuario haga clic en el botón back , irá a la pestaña anterior. (Esto puede o no ser lo que quieres, no era lo que yo quería).

Para mí, replaceState fue la mejor opción, ya que solo reemplaza el historial actual, por lo que cuando el usuario hace clic en el botón back , va a la página anterior.

$(''#tab-selector'').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

Consulte los documentos de la API de historial en MDN.

Answer 4

Hay una solución mediante el uso de la API de historial en los navegadores modernos con la recuperación de los viejos:

if(history.pushState) {
    history.pushState(null, null, ''#myhash'');
}
else {
    location.hash = ''#myhash'';
}

El crédito es para Lea Verou

Answer 5

No estoy seguro de si puedes alterar el elemento original, pero ¿qué tal si pasas del id attr a otra cosa, como data-id? Luego solo lea el valor de la identificación de datos para su valor de hash y no saltará.

Answer 6

Solución barata y desagradable. ¡Usa el feo #! estilo.

Para configurarlo:

window.location.hash = ''#!'' + id;

Para leerlo:

id = window.location.hash.replace(/^#!/, '''');

Dado que no coincide y anclar o identificar en la página, no saltará.

Answer 7

Utilicé una combinación de la solución Attila Fulop (Lea Verou) para navegadores modernos y la solución Gavin Brock para navegadores antiguos de la siguiente manera:

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, ''#'' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = ''#!'' + id;
}

Según lo observado por Gavin Brock, para capturar el ID de vuelta tendrá que tratar la cadena (que en este caso puede tener o no el "!") De la siguiente manera:

id = window.location.hash.replace(/^#!?/, '''');

Antes de eso, probé una solución similar a la propuesta por user706270, pero no funcionó bien con Internet Explorer: como su motor Javascript no es muy rápido, puede notar el aumento y la disminución del desplazamiento, lo que produce un desagradable efecto visual.