Anker nicht zum Anfang der Seite, aber 200px nach unten

Question

Ich habe einen Anker auf einem Element, das die Navigation zu diesem Punkt springen lässt. Der Anker schnappt ihn jedoch bis zum oberen Rand des Ansichtsfensters. Aufgrund einer festen Navigation ist es jetzt versteckt.

Ist es möglich, den Anker nicht an der Spitze des Ansichtsfensters und stattdessen 200px auf der Seite zu fangen?

Website hier: http://www.haselden.co.uk/james/docs

Answer 1

Schmutzige Lösung für diese aber funktioniert, danke @SteveJenkins für das Kommen, obwohl ich eine Optimierung hinzugefügt.

<a name="AnchorName" class="anchor">anchor text [invisible]</a> 

.anchor { 
    position: relative; 
    top: -[number]px; 
    visibility:hidden; 
} 

Answer 2

hinzufügen hiden Element 200px unteren und einen Anker anstatt machen.

Answer 3

Ich konnte dies lösen, indem ich tatsächlich CSS an den Anker anwendete. Also für den Anker dies hätte ich ...

<a name="AnchorName" class="anchor"></a> 

Und dann in der CSS würde ich dies habe ...

.anchor { 
    position: relative; 
    top: -[number]px; 
} 

Bitte beachte, dass ich den Anker einige Ungenauigkeiten in wie weit bemerkt haben ist in verschiedenen Browsern bewegt. Es könnte also nicht möglich sein, die Dinge perfekt auszurichten. Sie würden wahrscheinlich ein paar ausgefallene JQuery oder etwas brauchen, wenn Sie wollten, dass es perfekt positioniert ist.

Answer 4

Ich hatte ein ähnliches Problem und kam auf diese Frage. Keine Antwort funktionierte so, wie ich es wollte. Ich musste etwas weiter gehen und wollte meine Erkenntnisse teilen.

Ein bisschen Kontext zuerst. Ich habe eine Art Fehlerparsing durchgeführt, bei dem interessante Bereiche auf einer HTML-gerenderten Quellcodeansichtsseite hervorgehoben werden. Es gibt eine Indextabelle, die eine schnelle Navigation ermöglicht, die sich in einem festen Höhenvariablenkopf befindet. Was erklärt, warum ich auf dieser Frage-Seite endete.

Mein Problem war, dass der Anker Aufnahme wurde Sehraumes und den Sourcecode um bewegen, verschieben Sie den Text durch die Länge des Ankers und Messing mit Code-Formatierung. Ich habe mehrere Möglichkeiten ausprobiert, um NOT Platz zu machen, aber immer noch auf der Seite zu existieren, damit der Anker funktioniert. Am Ende entschied ich mich anstelle von . (laut @noregts Kommentar) für , was das Backspace-Zeichen wäre.

Jeder Anker wird dynamisch wie <a name="[some unique name]" class="anchor">&#008;</a> generiert und dann im festen Header referenziert.

Ein wenig Javascript mit der dynamischen Kopfhöhe und Anker Positionierung hilft (packt alle Anker und die obere Polsterung dynamisch anpassen):

<script type="text/javascript"><!-- 
var height = document.getElementById("head").offsetHeight; 
var a = document.getElementsByClassName('anchor'); 
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
for(key in a) { 
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) { 
     a[key].style.paddingTop = height + 'px'; 
    } 
} 
--></script> 

Diese Lösung funktioniert perfekt für dynamisch generierte Anker mit variabler Höhe aber fester Kopf. Hoffe, das kann jemand anderem helfen.

Answer 5

Dies ist jetzt viel einfacher mit CSS3. Die lange Erklärung ist hier: aber die kurze Version ist

a::before { 
    display: block; 
    content: " "; 
    margin-top: -70px; 
    height: 70px; 
    visibility: hidden; 
}