I'm not sure the best way to ask/search for this question:
When you click on an anchor link, it brings you to that section of the page with the linked-to area now at the VERY TOP of the page. I would like the anchor link to send me to that part of the page, but I would like some space at the top. As in, I don't want it to send me to the linked-to part with it at the VERY TOP, I would like 100 or so pixels of space there.
Does this make sense? Is this possible?
Edited to show code – it's just an anchor tag:
<a href="#anchor">Click me!</a>
<p id="anchor">I should be 100px below where I currently am!</p>
Best Answer
This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from.
EDIT 1:
As was pointed out by @erb, this only works if you are on the page while the hash is changed. Entering the page with a
#something
already in the URL does not work with the above code. Here is another version to handle that:NOTE: To use jQuery, you could just replace
window.addEventListener
with$(window).on
in the examples. Thanks @Neon.EDIT 2:
As pointed out by a few, the above will fail if you click on the same anchor link two or more times in a row because there is no
hashchange
event to force the offset.This solution is very slightly modified version of the suggestion from @Mave and uses jQuery selectors for simplicity
JSFiddle for this example is here