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>

Wicker

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

Flagwaving

tinkerbin.com is no more; maybe the link can be rewritten to tinkerbin.heroku.com but it seems that one is not working well either. – Amadus

perfect example why the required code should stay within the SO only. – Mattland

scroll-margin-top – Aeneid

Answer 2

CSS now supports scroll-margin-top.

This is the best way to do it in 2021.

Blanketing

Answer 3

Hmm, I would set the anchors in each section to be positioned absolutely, about 10px down from the start of the section. It would look like this:

.section {
    position: relative;
}

.section > a {
    position: absolute;
    top: 10px;
}

That is essentially a 10 pixel margin. You can adjust the value of top accordingly to change the margin/padding. I also used the direct descendant operator ( > ) so links in the paragraphs won't be affected.

Also, as mentioned by @NathanManousos, you should no longer use the name attribute, but the ID attribute. Relative document links will scroll to the ID of any element, not just links. You could put an ID on each of your section DIVs and use padding to scroll to the top of the div, and the padding will cause the actual content to be further down in the div.

<style>
    .section {
        padding-top: 10px;
    }
</style>

...

<nav>
    <a href="#test">TEST</a>
</nav>
<div class="section" id="test">
    <p>This content should be offset from the top of the page when scrolled to</p>
</div>

Mcevoy

Answer 4

The solution is scroll-margin-top. This allows you to specify an offset in any units you like to give "head room" to the section you are scrolling to See a live example at ARA Münsterlingen | Anlagen

.anlage-post {
    scroll-margin-top: 175px;
}

Aeneid

You're spamming this post with two comments and one answer, all redundant because there's already an answer suggesting scroll-margin-top. – Blanketing

@DennisHackethal unless my eysight really go poor I didn't see an answer using scroll-margin-top and now there is. You're welcome – Aeneid

https://mcmap.net/q/1697731/-adding-margin-to-link-within-page – Blanketing

cmd + f "scroll-margin-top" – Blanketing

sure that was my comment and then I decided it actually is the answer the op was looking for hence I created an answer. and to put it at rest I removce my comment. I anticipate great happines. – Aeneid

you have removed only one of your comments. and my link wasn't to your comment – it was to my answer, given two years before yours, already mentioning scroll-margin-top, so that you'd see that your answer was redundant and that you should have checked before posting it. why are you being so resistant to these suggestions? – Blanketing