Якорные теги <a>не работают в хроме при использовании #

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

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

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

<a id="Sound"><a>

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Вот моя версия ответа @Jake_ для Chrome/angular, не прокручивающегося до правильной привязки при начальной загрузке страницы с помощью ui-router (оригинальный ответ привел бы мой код к исключениям "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});
});

Ответ 4

Не уверен, помогает ли это вообще или нет, но я понял, что якоря в IE работают, но не в Firefox или Chrome. Я закончил тем, что добавил ## к своим якорям, и это решило проблему.

пример: a href= "## policy"> Цель и выражение о политике

вместо:

a href= "# policy"> Заявление о целях и политике

Ответ 5

У меня была и эта проблема (та же навигация по страницам с использованием ссылок), и решение было очень простым (хотя и разочаровывающим, чтобы понять). Надеюсь, это поможет - я также проверил IE, Firefox и Chrome, и это работало по всем направлениям (по состоянию на 05-22-2019).

Ваша ссылка должна выглядеть так:

<a href="pagename.html##anchorname">Word as link you want people to click</a>

и ваш якорь должен выглядеть так:

<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>

Ответ 6

 <html>
   <body>
    <li>
      <a href="#Sound">Sound</a>
    </li>
    <a id="Sound" href="www.google.com">I AM CALLED</a>
   </body>
</html>

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

Ответ 7

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

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