Comment puis-je mettre à jour window.location.hash sans sauter le document?

Question

J'ai mis en place un panneau coulissant sur mon site web.

Une fois l'animation terminée, j'ai défini le hash de la manière suivante :

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

(c'est un rappel, et l'id est attribué auparavant).

Cela fonctionne bien, permettant à l'utilisateur de mettre en signet le panneau, et aussi pour que la version sans JavaScript fonctionne.

Cependant, lorsque je mets à jour le hash, le navigateur se déplace vers l'emplacement. Je suppose que c'est le comportement attendu.

Ma question est : comment puis-je empêcher cela ? C'est-à-dire, comment puis-je changer le hash de la fenêtre, mais ne pas faire défiler le navigateur jusqu'à l'élément si le hash existe ? Une sorte de event.preventDefault() quelque chose comme ça ?

J'utilise jQuery 1.4 et le plugin scrollTo.

Merci beaucoup !

Mise à jour

Voici le code qui change le panneau.

$('#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

Il existe une solution de contournement en utilisant l'API d'historique sur les navigateurs modernes avec un fallback sur les anciens :

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

Le crédit revient à Lea Verou

Answer 2

Le problème est que vous définissez window.location.hash sur l'attribut ID d'un élément. Il est attendu que le navigateur se déplace jusqu'à cet élément, que vous utilisiez "preventDefault()" ou non.

Une façon de contourner cela est de préfixer le hash avec une valeur arbitraire comme ceci :

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

Ensuite, il vous suffit de vérifier le hash préfixé au chargement de la page. En prime, vous pouvez même faire défiler en douceur jusqu'à lui puisque vous contrôlez maintenant la valeur du hash...

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

Si vous avez besoin que cela fonctionne en tout temps (et pas seulement lors du chargement initial de la page), vous pouvez utiliser une fonction pour surveiller les changements de la valeur du hash et vous déplacer vers l'élément correct en temps réel :

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

Answer 3

Solution bon marché et médiocre.. Utilisez le style laid #!.

Pour le définir :

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

Pour le lire :

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

Puisque cela ne correspond ni à une ancre ni à un id sur la page, cela ne fera pas de saut.

Answer 4

Pourquoi ne pas obtenir la position de défilement actuelle, la mettre dans une variable puis attribuer le hachage et remettre le défilement de la page à l'endroit où il se trouvait :

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

cela devrait fonctionner

Answer 5

Je ne suis pas sûr si vous pouvez modifier l'élément d'origine mais que diriez-vous de passer de l'utilisation de l'attribut id à quelque chose d'autre comme data-id? Ensuite, il suffit de lire la valeur de data-id pour votre valeur de hachage et cela ne sautera pas.