The initial question was: how to jump to an anchor, but have a vertical offset of x pixels?
HTML anchors (“jump labels”) are something of a web design archetype. They make it easy to navigate directly to positions within an HTML document. If you click on an anchor link, the page you are currently viewing jumps directly to the selected area.
Anchors are somthing like reptiles of webdesign – or they are basically dinosaurs, but they’re still here. And they are here for a good reason: anchor links are easy to use and they do their job. You just click on an anchor link, and the page jumps right to the paragraph.
For some time now, one-page layouts, so-called one-pagers, have been quite popular. All, or at least the most important content is displayed on just one page. And with one-pagers, jump labels / anchor links are currently experiencing something of a comeback. Especially for display on mobile devices (smartphones), the combination of one-pagers and anchor navigation may offer certain advantages. Above all: the website does not have to be reloaded – all content is available on the same page and can be accessed either by scrolling or via jump labels.
With the rise of one-page-layouts anchor links are becoming even more and more popular these days. There are lots of websites built on the concept of having anchors doing the navigation. When the website consists of only one page, there are not so many options left to actually navigate the page.
Anchor Point Offset
But often anchors are just a bit too accurate. When placed at the very beginning of a paragraph or a section or a headline, the jump will lead right to the very beginning of that paragraph or section or headline. This can lead to the odd situation that the detail you wanted to have in focus is actually at the top border of the browser’s viewport.
I recently had to make just such an adjustment for a project. There was not only a fixed navigation bar, but also a white space above the content that should not be clipped for design reasons. The jumped content should therefore be free-standing and not stick to the top of the browser. Overall, there was an offset of approx. 100 pixels between the position of the jump marker and the actual desired position.
Move jump marker – Anchor offset in CSS
With the help of a little css magic a vertical offset can be added to an anchor. The actual anchor will then be placed x pixels above its actual position. To get this working the anchor element has to be positioned on an absolute position (position: absolute;) inside the element that you want to target. Here the sample code:
<div style="position:relative;">
<div class="anchor" id="jump123" style="position:absolute; top:-100px;"></div>
<div class = "mein_text">I should be 100px below where I currently am!</div>
</div>Anchor offset in jQuery Masonry
Originally I needed this anchor-jump for a good old image gallery, that was organized by the jQuery plugin Masonry. The good news is, that the above trick actually does work well with jQuery Masonry. You just have to place the anchor inside an (invisible) div-element, that is inside the actual image container. Then you can move the position of the anchor outside the container for example by 100 pixels, as it is described in the above code snippet. This will then again bring the targeted image further down towards the center of the screen – the center of attention.
HTML Smooth Scroll
The smooth scroll belongs to the use of anchor points, like the X belongs to the Y. Please supplement X and Y here with something that belongs together. In other words: whenever you set up a page-internal navigation using jump labels or anchor points, you should at least activate the “smooth” scroll behavior. For some time now, this can be easily done using the following code snippet in CSS:
html { scroll-behavior: smooth; }
Enjoy!