html - 使用 Transition/CSS3 滚动到 anchor

Question

我有一系列使用 anchor 机制的链接:

<div class="header">
    <p class="menu"><a href="#S1">Section1</a></p>
    <p class="menu"><a href="#S2">Section2</a></p>
    ...
</div>
<div style="width: 100%;">
<a name="S1" class="test">&nbsp;</a>
<div class="curtain">
Lots of text
</div>

<a name="S2" class="test">&nbsp;</a>
<div class="curtain">
lots of text
</div>
...
</div>

我正在使用以下 CSS:

.test
{
    position:relative; 
    margin: 0; 
    padding: 0; 
    float: left;
    display: inline-block;
    margin-top: -100px; /* whatever offset this needs to be */
}

它工作正常。但当然，当我们点击链接时，它会从一个部分跳到下一个部分。所以我想有一个平滑的过渡，使用某种滚动到选定的开始 部分。

我想我在 Stackoverflow 上读到这对于 CSS3 是不可能的(目前)，但我想确认一下，我也想知道“可能”是什么解决方案。我很乐意使用 JS，但我不会使用 jQuery。我尝试在链接上使用点击功能，检索需要显示的 div 的“垂直位置”，但我没有成功。我仍在学习 JS，对它的了解还不足以提出我自己的解决方案。

任何帮助/想法将不胜感激。

Answer 1

您可以使用 scroll-behavior CSS 属性 (在除 Internet Explorer 和 Safari 之外的所有浏览器中为 supported):

a {
  display: inline-block;
  padding: 5px 7%;
  text-decoration: none;
}

nav, section {
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav {
  width: 350px;
  padding: 5px;
}

section {
  width: 350px;
  height: 130px;
  overflow-y: scroll;
  border: 1px solid black;
  font-size: 0; 
  scroll-behavior: smooth;    /* <----- THE SECRET ---- */
}

section div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 8vw;
}

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<section>
  <div id="page-1">1</div>
  <div id="page-2">2</div>
  <div id="page-3">3</div>
</section>