Puis-je forcer les navigateurs WebKit à afficher l'identifiant de fragment?

Question

J'utilise jQuery et l'identificateur de fragment pour créer un changement d'état en fonction de la partie d'un site d'une page que l'utilisateur est en train de regarder.

J'ai finalement réussi à faire fonctionner cela mais comme Safari et Chrome n'afficheront pas l'identifiant de fragment, je ne peux pas le transformer en variable et donc le système tombe en panne.

Existe-t-il un moyen de forcer cette action spécifiquement pour les navigateurs WebKit ou une autre façon d'accéder au fragment?

modifier: code ajouté ci-dessous

(function($){ 
$.fn.sectionMove = function() { 

    return this.each(function() {   
    $(this).click(function() { 
      if(window.location.hash){ 
        var $hash = window.location.hash; 
      } else if (!window.location.hash) { 
        var $hash = '#section1'; 
      } 
      $n = $hash.substring($hash.length-1,$hash.length); 

      $("div#headerNav ul li:nth-child(" + $n + ") a").removeClass('on'); 

      var $anchor = $(this); 
      $('html, body').stop().animate({ 
       scrollTop: $($anchor.attr('href')).offset().top 
      }, 1000,'easeInOutExpo', function(){ 
       var $hash = window.location.hash; 
       $n = $hash.substring($hash.length-1,$hash.length); 
       $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on'); 
      }); 
      event.preventDefault(); 
     }); 
    }); 

    }; 
})(jQuery); 

Answer 1

J'ai réussi à le résoudre moi-même. Le problème était avec les lignes de mon jquery suivantes:

$('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 

Alors que ne permettait un défilement fluide ait lieu sur la page, il naviguait à l'ancre sans mettre à jour l'URL avec l'identifiant de fragment.

Si quelqu'un s'intéresse à la façon d'accomplir la même chose, alors le code ci-dessous devrait aider. Je l'ai modifié pour mes propres besoins mais le crédit doit aller à Arial Flesler (http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links)

function filterPath(a) { 
     return a.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '') 
    } 

    var e = filterPath(location.pathname); 
    var f = scrollableElement('html', 'body'); 
    $('a[href*=#]').each(function() { 
     var b = filterPath(this.pathname) || e; 
     if (e == b && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) { 
      /*var anchor1 = window.location.hash; */ 
      var c = $(this.hash), 
       target = this.hash; 
      if (target) { 
       var d = c.offset().top; 
       $(this).click(function (a) {   

        a.preventDefault(); 
        $(f).animate({ 
         scrollTop: d 
        }, 1000,'easeInOutExpo', function() { 
         location.hash = target 
         $("div#headerNav ul li a").removeClass('on'); 

         $n = target.substring(target.length-1,target.length); 
         $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on'); 

        }) 
       }) 
      } 
     } 
    });