How can I offset an anchor (a href) to adjust for a freeze pane header?

Question

I am trying to offset an anchor (a href) to adjust for a fixed header. I have buttons that are linked (a href) to different sections (div) on the page.

However, when I click each button, I am taken to the middle of each section instead of at the beginning.

I tried referencing the solutions here (offsetting an html anchor to adjust for fixed header), but I still couldn't get it to work.

I created a simple jsfiddle that reflects where I am currently. Please find it here: https://jsfiddle.net/k2nuz472/19/

A solution would be much appreciated, it would be great if you could demonstrate the solution in the jsfiddle.

.box1{
  width: 100%;
  height:100px;
  top:0;
  left: 0;
  background: #98F1FF; 
  position: fixed;
}

.buttons{
 display: flex;
 align-items: center;
 justify-content: center;
}

.push1{
  margin-bottom: 100px;
}

.box2{
  width: 100%;
  height:200px;
  left: 0;
  background:yellow; 
}

.box3{
  width: 100%;
  height:200px;
  left: 0;
  background: maroon; 
  display:flex;
}

.box4{
  width: 100%;
  height:200px;
  left: 0;
  background: blue; 
  display:flex;
}

<div class="box1">

  
  <div class=buttons>
    <a href="#Skip1"><button class="Button change" id="box2">About</button></a>
    <a href="#Skip2" ><button class="Button change" id="Portfolio1">Portfolio</button></a> 
    <a href="#Skip3"><button class="Button change" id="Contact1">Contact</button></a> 
  </div>
   
</div>

<div class="push1"></div>

<div class="box2" id="Skip1">
<h1>
About me
</h1>
</div>

<div class="box3" id="Skip2">
<h1>
My Portfolio
</h1>
</div>

<div class="box4" id="Skip3">
<h1>
Contact Me
</h1>
</div>

this will be helpful: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors — jayly, Mar 20 '18 at 06:24

Emon · Answer 1 · 2018-03-20T06:20:05.737

It is not going to the middle of the boxes. The top of the boxes are being aligned to the top of the window but you don't see it because of the fixed header. You can get it going by adding a dummy <div class="ecaret"> and positioning it with CSS.

.box1{
  width: 100%;
  height:100px;
  top:0;
  left: 0;
  background: #98F1FF; 
  position: fixed;
}

.buttons{
 display: flex;
 align-items: center;
 justify-content: center;
}

.push1{
  margin-bottom: 100px;
}

.box2{
  width: 100%;
  height:200px;
  left: 0;
  background:yellow; 
}

.box3{
  width: 100%;
  height:200px;
  left: 0;
  background: maroon; 
  display:flex;
}

.box4{
  width: 100%;
  height:200px;
  left: 0;
  background: blue; 
  display:flex;
}

.ecaret{
  position: relative;
  z-index: -1;
  top: -100px;
}

<div class="box1">

  
  <div class=buttons>
    <a href="#Skip1"><button class="Button change" id="box2">About</button></a>
    <a href="#Skip2" ><button class="Button change" id="Portfolio1">Portfolio</button></a> 
    <a href="#Skip3"><button class="Button change" id="Contact1">Contact</button></a> 
  </div>
   
</div>

<div class="push1"></div>

<div class="ecaret" id="Skip1"></div>
<div class="box2">
<h1>
About me
</h1>
</div>

<div class="ecaret" id="Skip2"></div>
<div class="box3">
<h1>
My Portfolio
</h1>
</div>

<div class="ecaret" id="Skip3"></div>
<div class="box4">
<h1>
Contact Me
</h1>
</div>

How can I offset an anchor (a href) to adjust for a freeze pane header?

1 Answers1