[css] anchor offset (for fixed header) : 10 solutions

PROBLEM

Offsetting an html anchor to adjust for fixed header?

 

 

SOLUTION 1

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

<a class="anchor" id="top"></a>

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

a.anchor {display: block; position: relative; top: -250px; visibility: hidden;}

 

 

SOLUTION 2

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

<a name="mywikianchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

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

 

 

SOLUTION 3

a[name]  
{ 
  padding-top: 40px; 
  margin-top: -40px; 
  display: inline-block; /* required for webkit browsers */ 
} 

- In CSS, optionally you may want to add the following if the target is still off the screen:

vertical-align: top; 

 

 

SOLUTION 4

*[id]:before {display: block; content: " "; margin-top: -75px; height: 75px; visibility: hidden;}

 

 

SOLUTION 5

<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->

$(function() 
{
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) 
{
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) 
{
        $('html,body').animate(
{
          scrollTop: target.offset().top - 125 //offsets for fixed header
        
}
, 1000);return false;     
 }
 } 
 })

 

 

SOLUTION 6

a[id]:before {content:""; display:block; height:50px; margin:-30px 0 0;}

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.

:target {display: block; position: relative; top: -100px; visibility: hidden;}

 

 

 

SOLUTION 8

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

:target:before {content: ""; display: inline-block; height: 180px; margin: -180px 0 0;}

 

 

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

$(".dropdown-menu a[href^='#']").on('click', function(e) 
{
   // prevent default anchor click behavior
   e.preventDefault();

   // animate
   $('html, body').animate(
{
       scrollTop: $(this.hash).offset().top - 60
 }, 300, function()
{
     });
});

 

 

SOLUTION 10

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

<div class="wiki" id="gherkin"></div>
<div class="page-header">
  <h1>wikitechy</h1>
</div>

.wiki {height: 40px;}

 

- Sorces : Wikitechy | Offsetting an html anchor to adjust for fixed header (March 23, 2017)