web-dev-qa-db-fra.com

Les balises d'ancrage <a> ne fonctionnent pas en chrome lors de l'utilisation de #

Voici le code que j'utilise sur ma page, 

<li><a href="/explore/#Sound">Sound</a></li>

(dans un menu qui apparaît sur toutes les pages)

<a id="Sound"><a>

(sur la page où je veux faire un lien) 

J'ai essayé d'ajouter du contenu aux balises avec un identifiant. Mais seulement en chrome le navigateur ne défilera pas jusqu'à la balise. Ces ancres fonctionnent dans IE & FF Des idées?

htmlhtml5google-chromecross-browser
12
Jake_

Il s’est avéré qu’il s’agissait d’un bogue dans certaines versions de Chrome, qui contournait la solution pour tous ceux qui en avaient besoin! :)

$(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 300);
        }
    });
33
Jake_

La solution de contournement affichée ne fonctionnait pas pour moi, cependant, après des jours de recherche, cela a finalement fonctionné comme un charme, alors je me suis dit que ça valait la peine d'être partagé:

 $(function() {
       $('a[href*="#"]:not([href="#"])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
           var target = $(this.hash);
           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top
             }, 1000);
             return false;
           }
         }
       });
     });
15
Doug Edge

Voici ma version de @Jake_ answer pour Chrome/angular ne défilant pas jusqu'à un ancrage correct lors du chargement de la page initiale à l'aide de ui-router (la réponse originale jetterait mon code dans des exceptions 'Transition remplacées'):

angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
  var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
    $document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
      var hash;
      var params;
      var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
      finishHook(); // Deregister the hook; the problem happens only on initial load
      if ('#' in $state.params && isChrome) {
        hash = $state.params['#']; // Save the anchor
        params = _.omit($state.params, ['id', '#']);
        $timeout(function() {
          // Transition to the no-anchor state
          $state.go('.', params, { reload: false, notify: false, location: 'replace' });
          $timeout(function() {
            // Transition back to anchor again
            $state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
          }, 0);
        }, 0);
      }
    });
  }, {invokeLimit: 1});
});
0
Maksym

Pas sûr que cela aide ou pas, mais j'ai réalisé que mes ancres dans IE fonctionnaient mais pas dans Firefox ou Chrome. J'ai fini par ajouter ## à mes ancres et cela a résolu le problème.

exemple: a href = "## policy"> Objet et déclaration de politique 

au lieu de :

a href = "# policy"> Objet et énoncé de politique

0
dan harner