Якорь теги не работают в Chrome при использовании #

вот код, который я использую на моей странице, 

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

(в меню, которое отображается на всех страницах)

<a id="Sound"><a>

(на странице, на которую я хочу перейти по ссылке)

Я попытался добавить содержимое в теги с идентификатором. Но только в chrome браузер не будет прокручиваться до тега. Эти якоря работают в IE&FF Есть идеи?

10
cross-browser google-chrome html html5

5 ответов

оказывается, это была ошибка в некоторых версиях chrome, публикуя обходной путь для тех, кто в нем нуждается! :)

$(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);
        }
    });
29

решение опубликовано не работал для меня, однако после нескольких дней поисков он, наконец, работал как шарм, и я решил, что стоит поделиться:

 $(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;
           }
         }
       });
     });
13

вот моя версия ответа @Jake для Chrome / angular не прокручивается до правильной привязки на начальной странице, загружаемой с помощью ui-маршрутизатора (исходный ответ бросит мой код в исключения "Transition superseeded"):

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
 <html>
   <body>
    <li>
      <a href="#Sound">Sound</a>
    </li>
    <a id="Sound" href="www.google.com">I AM CALLED</a>
   </body>
</html>

используйте это в качестве кода, он вызовет якорный тег со значением id sound

-3

просто измените вызов по вашей ссылке на external.

<a href="#nlink" class="external">  </a>
-4