Offsetting an html anchor to adjust for fixed header?
- You could use CSS without any javascript.
- Give your anchor a class:
- You can then position the anchor with an offset higher or lower than where it actually appears on the page, by making it a block element by relatively positioning it. -250px will position the anchor upto 250px
- This is another solution using HTML code for offseting an html anchor:
- This doesn’t create any gap in the content and anchor links works.
CSS solution :
[pastacode lang=”css” manual=”a%5Bname%5D%20%0A%7B%0A%20%20padding-top%3A%2040px%3B%0A%20%20margin-top%3A%20-40px%3B%0A%20%20display%3A%20inline-block%3B%20%2F*%20required%20for%20webkit%20browsers%20*%2F%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]- In CSS, optionally you may want to add the following if the target is still off the screen:
- This is one of the solution:
HTML :
[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22%23anchor%22%3E%3C%2Fdiv%3E%20%3C!–%20%23anchor%20here%20is%20the%20anchor%20tag%20which%20is%20on%20your%20URL%20–%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/]JavaScript :
[pastacode lang=”javascript” manual=”%20%24(function()%20%0A%7B%0A%20%20%24(‘a%5Bhref*%3D%23%5D%3Anot(%5Bhref%3D%23%5D)’).click(function()%20%7B%0A%20%20%20%20if%20(location.pathname.replace(%2F%5E%5C%2F%2F%2C”)%20%3D%3D%20this.pathname.replace(%2F%5E%5C%2F%2F%2C”)%20%0A%26%26%20location.hostname%20%3D%3D%20this.hostname)%20%0A%7B%0A%20%20%20%20%20%20var%20target%20%3D%20%24(this.hash)%3B%0A%20%20%20%20%20%20target%20%3D%20target.length%20%3F%20target%20%3A%20%24(‘%5Bname%3D’%20%2B%20this.hash.slice(1)%20%2B’%5D’)%3B%0A%20%20%20%20%20%20if%20(target.length)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(‘html%2Cbody’).animate(%0A%7B%0A%20%20%20%20%20%20%20%20%20%20scrollTop%3A%20target.offset().top%20-%20125%20%2F%2Foffsets%20for%20fixed%20header%0A%20%20%20%20%20%20%20%20%0A%7D%0A%2C%201000)%3Breturn%20false%3B%20%20%20%20%20%0A%20%7D%0A%20%7D%20%0A%20%7D)%3B%0A%20%20%2F%2FExecuted%20on%20page%20load%20with%20URL%20containing%20an%20anchor%20tag.%0A%20%20if(%24(location.href.split(%22%23%22)%5B1%5D))%20%0A%7B%0A%20%20%20%20%20%20var%20target%20%3D%20%24(‘%23’%2Blocation.href.split(%22%23%22)%5B1%5D)%3B%0A%20%20%20%20%20%20if%20(target.length)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(‘html%2Cbody’).animate(%0A%7B%0A%20%20%20%20%20%20%20%20%20%20scrollTop%3A%20target.offset().top%20-%20125%20%2F%2Foffset%20height%20of%20header%20here%20too.%20%7D%2C%201000)%3B%20return%20false%3B%0A%7D%20%20%20%20%7D%7D)%3B%0A” message=”JAVASCRIPT CODE” highlight=”” provider=”manual”/][pastacode lang=”css” manual=”a%5Bid%5D%3Abefore%20%0A%7B%0A%20%20%20%20content%3A%22%22%3B%0A%20%20%20%20display%3Ablock%3B%0A%20%20%20%20height%3A50px%3B%0A%20%20%20%20margin%3A-30px%200%200%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/] [ad type=”banner”]
- That will append a pseudo-element before every a-tag with an id. Adjust values to match the height of your header.
- For modern browsers, just add the CSS3 :target selector to the page. This will apply to all the anchors automatically.
- Adjust the height and the negative margin to the offset you need…
- You can include a smooth-scroll effect to the anchor, while making it stop at -60px above the anchor, fitting nicely underneath the fixed bootstrap navigation bar (requires jQuery):
- We added 40px-height .wiki element holding the anchor before each h1 elements.
nice and easy
good work the article is very interesting
nice and easy
best
Easy.
nice