Offsetting an html anchor to adjust for fixed header

PROBLEM:

Offsetting an html anchor to adjust for fixed header?

SOLUTION 1:

• You could use CSS without any javascript.
• Give your anchor a class:

[pastacode lang=”markup” manual=”%3D%22%3Ca%20classanchor%22%20id%3D%22top%22%3E%3C%2Fa%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

• 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

[pastacode lang=”css” manual=”a.anchor%20%0A%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%20-250px%3B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 2:

• This is another solution using HTML  code for offseting an html anchor:

[pastacode lang=”markup” manual=”%3Ca%20name%3D%22mywikianchor%22%3E%0A%20%20%20%20%3Ch1%20style%3D%22padding-top%3A%2040px%3B%20margin-top%3A%20-40px%3B%22%3EMy%20anchor%3C%2Fh1%3E%0A%3C%2Fa%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/]

• This doesn’t create any gap in the content and anchor links works.

SOLUTION 3:

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:

[pastacode lang=”css” manual=”%20vertical-align%3A%20top%3B” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 4:

• This is one of the solution:

[pastacode lang=”css” manual=”*%5Bid%5D%3Abefore%20%0A%7B%20%0A%20%20display%3A%20block%3B%20%0A%20%20content%3A%20%22%20%22%3B%20%0A%20%20margin-top%3A%20-75px%3B%20%0A%20%20height%3A%2075px%3B%20%0A%20%20visibility%3A%20hidden%3B%20%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 5:

 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”/]

SOLUTION 6:

[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.

SOLUTION 7:

• For modern browsers, just add the CSS3 :target selector to the page. This will apply to all the anchors automatically.

[pastacode lang=”css” manual=”%3Atarget%20%0A%7B%0A%20%20%20%20display%3A%20block%3B%20%20%20%20%0A%20%20%20%20position%3A%20relative%3B%20%20%20%20%20%0A%20%20%20%20top%3A%20-100px%3B%0A%20%20%20%20visibility%3A%20hidden%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 8:

• Adjust the height and the negative margin to the offset you need…

[pastacode lang=”css” manual=”%3Atarget%3Abefore%20%0A%7B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20height%3A%20180px%3B%0A%20%20%20%20margin%3A%20-180px%200%200%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]

SOLUTION 9:

• 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):

[pastacode lang=”javascript” manual=”%24(%22.dropdown-menu%20a%5Bhref%5E%3D’%23’%5D%22).on(‘click’%2C%20function(e)%20%0A%7B%0A%20%20%20%2F%2F%20prevent%20default%20anchor%20click%20behavior%0A%20%20%20e.preventDefault()%3B%0A%0A%20%20%20%2F%2F%20animate%0A%20%20%20%24(‘html%2C%20body’).animate(%0A%7B%0A%20%20%20%20%20%20%20scrollTop%3A%20%24(this.hash).offset().top%20-%2060%0A%20%7D%2C%20300%2C%20function()%0A%7B%0A%20%20%20%20%20%7D)%3B%0A%7D)%3B%0A” message=”JAVASCRIPT CODE” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 10:

• We added 40px-height .wiki element holding the anchor before each h1 elements.

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22wiki%22%20id%3D%22gherkin%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22page-header%22%3E%0A%20%20%3Ch1%3Ewikitechy%3C%2Fh1%3E%0A%3C%2Fdiv%3E%0A” message=”HTML CODE” highlight=”” provider=”manual”/]

CSS:

[pastacode lang=”css” manual=”.wiki%20%0A%7B%0A%20height%3A%2040px%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]