如何偏移锚点（href）以调整冻结窗格标题？

Question

我试图偏移一个锚（一个href）来调整一个固定的标题。我有按钮链接（一个href）到页面上的不同部分（div）。

然而，当我点击每个按钮时，我被带到每个部分的中间而不是在开头。

我尝试在这里引用解决方案（offsetting an html anchor to adjust for fixed header），但我仍然无法让它发挥作用。

我创建了一个简单的jsfiddle来反映我当前的位置。请在此处找到：https://jsfiddle.net/k2nuz472/19/

非常感谢解决方案，如果您能够在jsfiddle中演示解决方案，那就太棒了。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

它不会进入盒子的中间位置。框的顶部与窗口的顶部对齐，但由于固定的标题，您看不到它。您可以通过添加虚拟<div class="ecaret">并使用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>