Offsetting an html anchor to adjust for fixed header?

  • You could use CSS without any javascript.
  • Give your anchor a class:
HTML CODE 
="<a classanchor" id="top"></a>
[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
CSS CODE 
a.anchor 
{
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

  • This is another solution using HTML  code for offseting an html anchor:
HTML CODE 
<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.

CSS solution :

CSS CODE 
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:
CSS CODE 
 vertical-align: top;

  • This is one of the solution:
CSS CODE 
*[id]:before 
{ 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
[ad type=”banner”]

 HTML :

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

JavaScript :

JAVASCRIPT CODE 
 $(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;     
 }
 } 
 });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) 
{
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) 
{
        $('html,body').animate(
{
          scrollTop: target.offset().top - 125 //offset height of header here too. }, 1000); return false;
}    }});

CSS CODE 
a[id]:before 
{
    content:"";
    display:block;
    height:50px;
    margin:-30px 0 0;
}
[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.
CSS CODE 
:target 
{
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

  • Adjust the height and the negative margin to the offset you need…
CSS CODE 
:target:before 
{
    content: "";
    display: inline-block;
    height: 180px;
    margin: -180px 0 0;
}

  • 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):
JAVASCRIPT CODE 
$(".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()
{
     });
});
[ad type=”banner”]

  • We added 40px-height .wiki element holding the anchor before each h1 elements.
HTML CODE 
<div class="wiki" id="gherkin"></div>
<div class="page-header">
  <h1>wikitechy</h1>
</div>

CSS:

CSS CODE 
.wiki 
{
 height: 40px;
}

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , ,