html - 如何偏移 anchor (href)以调整卡住 Pane 标题？

Question

我正在尝试偏移 anchor (a href) 以针对固定 header 进行调整。我有链接(a href)到页面上不同部分(div)的按钮。

但是，当我单击每个按钮时，我会被带到每个部分的中间而不是开头。

我尝试引用这里的解决方案 ( offsetting an html anchor to adjust for fixed header )，但我仍然无法让它工作。

我创建了一个简单的 jsfiddle 来反射(reflect)我当前的位置。请在这里找到它:https://jsfiddle.net/k2nuz472/19/

如果您能在 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>

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>