web-dev-qa-db-de.com

<a> Anker-Tags funktionieren bei Verwendung von # nicht in Chrome.

Hier ist der Code, den ich auf meiner Seite verwende. 

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

(in einem Menü, das auf allen Seiten erscheint)

<a id="Sound"><a>

(auf der Seite, auf die ich verlinken möchte) 

Ich habe versucht, den Tags Inhalt mit einer ID hinzuzufügen. Nur in Chrome wird der Browser nicht bis zum Tag gescrollt. Diese Anker funktionieren in IE & FF Ideen?

htmlhtml5google-chromecross-browser
12
Jake_

Es stellte sich heraus, dass dies ein Fehler in bestimmten Versionen von Chrome war, der eine Problemumgehung für jeden veröffentlicht, der dies benötigt. :)

$(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_

Der Workaround, der gepostet wurde, hat für mich nicht funktioniert, aber nach Tagen der Suche funktionierte das endlich wie ein Zauber, also dachte ich, es lohnt sich, es zu teilen:

 $(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

Ich hatte auch dieses Problem (gleiche Seitennavigation über Links) und die Lösung war sehr einfach (obwohl es frustrierend war, es herauszufinden). Ich hoffe, das hilft - auch ich habe IE, Firefox und Chrome) überprüft und es hat auf der ganzen Linie funktioniert (Stand 22.05.2009).

Dein Link sollte so aussehen:

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

und dein anker sollte so aussehen:

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

Hier ist meine Version von @Jake_ answer für Chrome/angle beim ersten Laden der Seite mit einem ui-router nicht zu einem korrekten Anker (die ursprüngliche Antwort würde meinen Code in "Transition superseeded" -Ausnahmen werfen):

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

Ich bin mir nicht sicher, ob das alles hilft oder nicht, aber mir wurde klar, dass meine Anker in IE funktionierten, aber nicht in Firefox oder Chrome. Am Ende fügte ich ## zu meinen Ankern hinzu und dies löste das Problem.

beispiel: a href = "## policy"> Zweck und Richtlinienerklärung 

anstatt :

a href = "# policy"> Zweck und Grundsatzerklärung

0
dan harner