同一頁面內的鏈接

Question

我將目錄與同一頁面中某個部分的標題鏈接在一起。 但是，當屏幕向下滾動到所需部分時，實際鏈接的標題會丟失，並保持固定不變。 在移動預覽中工作正常。 桌面出現問題。 以下是我正在使用的代碼：

<div class="content uk-width-1-2@l uk-width-1-1@m uk-width-1-1@s">
  <span class="anchor" id="Overview"></span>
  <h2>Overview</h2>
  <p> As a very high-level summary:</p>
  <ul>
    <li>
      Companu has strong application, network and infrastructure-level
      security controls in place to ensure your data is safely stored
      and processed <br /><br />
    </li>
    <li>
      Company serves multiple tenants from the same application codebase,
      but uses effective isolation techniques to keep tenant data separate
      <br /><br />
    </li>
    <li>
      Privacy laws, which are broadly compatible with many other jurisdictions
      (for example, we support the rights of access and rectification
      for data subjects) <br/><br/>
    </li>
    <li>Comapny is hosted on AWS, in multiple regions, using VPC <br /><br /></li>
  </ul>
  <p>
    You'll find more information on each of these points
    in the detailed chapters documents below.
  </p>
</div>

.anchor {
  display: block;
  height: 63px;
  /* this is the height of your header */
  margin-top: -63px;
  /* this is again negative value of the height of your header */
  visibility: hidden;
}

誰能幫忙解決這個問題。

Answer 1

一種常見的方法是通過CSS將不可見的偽元素添加到鏈接的原始目標元素中，如下所示：

#Overview::before { 
  display: block; 
  content: " "; 
  margin-top: -63px; 
  height: 63px; 
  visibility: hidden; 
}

這將以某種方式“擴展”具有該ID的元素，從而使錨點位於主元素上方63px（可以是任何值），而不會引起任何其他可見的變化。

注意：我將Overview ID直接分配給h2元素，而不是額外的span

這是一個片段示例：

 html, body { margin: 0; } .header { position: fixed; width: 100%; height: 60px; top: 0; left: 0; background: #d75; } .something_in_between { height: 500px; background: #75f; padding-top: 70px; } #Overview { background: yellow; height: 500px; } #Overview::before { display: block; content: " "; margin-top: -63px; height: 63px; visibility: hidden; } 

 <div class="header">Fixed Header</div> <div class="something_in_between">Here's the <a href="#Overview">LINK</a> to the "Overview" element</div> <div id="Overview">This should be visible when clicking the link</div>