web-dev-qa-db-ja.com

アンカー<a>タグが機能しないchromeを使用する場合＃

これが私のページで使用しているコードです。

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

（すべてのページに表示されるメニュー内）

<a id="Sound"><a>

（リンクしたいページで）

IDを持つタグにコンテンツを追加しようとしました。ただし、chromeでのみブラウザはタグまでスクロールダウンしません。これらのアンカーはIE＆FFで機能しますか？

htmlhtml5google-chromecross-browser
18
Jake_

これは特定のバージョンの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);
        }
    });
38
Jake_

投稿された回避策は私にとってはうまくいきませんでしたが、検索の数日後にこれは最終的に魅力のように機能したので、共有する価値があると思いました：

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

私もこの問題を抱えていて（リンクを使用した同じページナビゲーション）、解決策は非常に簡単でした（理解するのはイライラします）。これがお役に立てば幸いです-IE、Firefox、およびChromeをチェックしました。これは全面的に機能しました（2019年5月22日現在）。

リンクは次のようになります。

<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>
0
Brister Productions

Chrome/angular ui-routerを使用して最初のページのロード時に正しいアンカーにスクロールしない（元の答えは「遷移スーパーシード」例外に私のコードをスローします）：

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

これがまったく役立つかどうかはわかりませんが、アンカーがIEで機能しているがFirefoxまたはChromeでは機能していないことに気付きました。アンカーに##を追加して問題を解決しました。

例：a href = "## policy">目的とポリシーに関する声明

の代わりに ：

a href = "＃policy">目的とポリシーに関する声明

0
dan harner