hinzufügen von Rand zum link innerhalb der Seite
Links innerhalb einer Seite scrollen Ihre Inhalte an die Spitze des browser-Fensters. Gibt es eine Möglichkeit, um einen Rand hinzuzufügen, dass? Ich werde mit einigen javascript-Leitfaden für das scrollen, aber würde gerne eine brauchbare fallback.
Also, kurzum, kann ich ein margin in der CSS, dass etwas Platz zwischen der Oberseite des browser-Fensters und einen zweiten Abschnitt, wenn es eine Seite verlinken.
HTML:
<nav>
<a href="#test">TEST</a>
</nav>
<div class="section">
<a name="test"></a>
<p>This content should be offset from the top of the page when scrolled to</p>
</div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
die bevorzugte Art und Weise zu tun, in-page links ist die Verwendung des id statt name-Attribut.
sollte übereinstimmen mit:
Von hier aus können Sie leicht hinzufügen Polsterung an der Spitze des #test-div, und die scroll-position.
Beispiel: http://tinkerbin.com/EvV7byy9
Hmm, ich würde den Anker in jedem Abschnitt werden absolut positioniert, etwa 10px nach unten aus dem Anfang des Abschnitts. Es würde dann so Aussehen:
Das ist im wesentlichen eine 10 pixel Rand. Sie können den Wert der top-entsprechend zu ändern, die margin/padding. Ich auch, der direkte Nachkomme-operator ( > ) so, dass links, die in den Absätzen sind nicht betroffen.
Auch, wie bereits von @NathanManousos, sollten Sie nicht mehr verwenden das name-Attribut, aber das ID-Attribut. Relative Dokument-links werden Blättern Sie zu der ID eines Elements, nicht nur links. Sie könnten eine ID auf jedem Abschnitt DIVs und Polsterung verwenden, um einen Bildlauf zum oberen Rand der div, und die Polsterung wird verursachen, dass die eigentlichen Inhalte werden weiter unten in den div.