Skip to content

Lassen Sie den Ankerlink einige Pixel höher gehen, wo er verlinkt ist

Lösung:

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

Dies ermöglicht es dem Browser, für uns zum Anker zu springen, und dann verwenden wir diese Position zum Versetzen.

BEARBEITEN 1:

Wie @erb darauf hingewiesen hat, funktioniert dies nur, wenn Sie sich auf der Seite befinden, während der Hash geändert wird. Aufruf der Seite mit a #something bereits in der URL funktioniert mit dem obigen Code nicht. Hier ist eine andere Version, um das zu handhaben:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

HINWEIS: Um jQuery zu verwenden, können Sie einfach ersetzen window.addEventListener mit $(window).on in den Beispielen. Danke @Neon.

BEARBEITEN 2:

Wie einige darauf hingewiesen haben, schlägt das Obige fehl, wenn Sie zweimal oder mehrmals hintereinander auf denselben Ankerlink klicken, da es keine gibt hashchange -Ereignis, um den Offset zu erzwingen.

Diese Lösung ist eine sehr leicht modifizierte Version des Vorschlags von @Mave und verwendet der Einfachheit halber jQuery-Selektoren

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

JSFiddle für dieses Beispiel ist hier

Wenn Sie nur mit CSS arbeiten, können Sie dem verankerten Element eine Auffüllung hinzufügen (wie in einer obigen Lösung). Um unnötigen Leerraum zu vermeiden, können Sie einen negativen Rand derselben Höhe hinzufügen:

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

Ich bin mir nicht sicher, ob dies auf jeden Fall die beste Lösung ist, aber bei mir funktioniert es gut.

Noch bessere Lösung:

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

Positionieren Sie einfach die <a> Tag mit absoluter Positionierung innerhalb eines relativ positionierten Objekts.

Funktioniert beim Betreten der Seite oder durch eine Hash-Änderung innerhalb der Seite.

Click to rate this post!
[Total: 0 Average: 0]



Anderer Beitrag

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.