adding margin to link within page

Question

Links within a page scroll your content to the top of the browser window. Is there any way to add a margin to that? I'll be using some javascript to guide the scrolling, but would like to have a viable fallback.

So, in short, can I add a margin in CSS that will add some space inbetween the top of the browser window and a section when it's a page link.

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>

Answer 1

the preferred way to do in-page links is to use the id instead of name attribute.

<a href="#test">

should match up with:

<div id="test">

From here you can easily add padding to the top of the #test div and that will be your scroll position.

Example: http://tinkerbin.com/EvV7byy9