html - 页面跳转到部分中间？

Question

我正在尝试跳转到网页的某个部分，但是...

我想跳到它的中心（而不是让页面顶部成为该部分的顶部）

有没有办法做到这一点？

我在想是否有某种#section + 50px东西？

标签： html

Answer 1

因为你想要纯 HTML，基于你的标签，我能想到的就是这个。

• 创建一个绝对元素。
• 将其放在部分的中间。
• 将锚点指向所述元素。

html {
  scroll-behavior: smooth;
}

section {
  position: relative; /* to make absolute child elements stay within it */
  min-height: 100vh;
}

section.yellow {
  background-color: yellow;
}

section.brown {
  background-color: brown;
}

section.purple {
  background-color: purple;
}

.middle.element {
  position: absolute;
  height: 0px;
  top: 50%;
  width: 100%;
}

.dashed-line.middle.element {
  border-top: 1px dashed;
}

<ul>
 <li><a href="#yellow">Yellow</a></li>
 <li><a href="#brown">Brown</a></li>
 <li><a href="#purple">Purple</a></li>
</ul>

<section class="yellow">
  <div class="dashed-line middle element"><a id="yellow"></a></div>
</section>

<section class="brown">
  <div class="middle element"><a id="brown"></a></div>
</section>

<section class="purple">
  <div class="middle element"><a id="purple"></a></div>
</section>

<section></section>