javascript - 同一页面内的链接

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 的元素，使 anchor 位于主元素上方 63 像素(可以是任何值)，而不会导致任何其他可见变化。

注意:我会将 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>