css3 滚动而不是页面重新加载

Question

我按照这个例子

https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior

但它不起作用，页面重新加载。我只需要滚动，而不是重新加载。

实际上我想将所有正文滚动到特定的 id 元素。

//html5

<nav>
  <a href="#page-1" rel='no-refresh' >1</a>
  <a href="#page-2" rel='no-refresh' >2</a>
  <a href="#page-3" rel='no-refresh' >3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1" >1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

//CSS3

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Answer 1

目前只有 Firefox 36 完全支持此功能。 Internet Explorer 或 Safari 根本不支持此功能。

要使其与 Chrome 或 Opera 一起使用，您需要进入浏览器设置并启用“平滑滚动”或“启用实验性网络平台功能”标志。

旁注:您链接到的页面包含有关浏览器兼容性的信息，以供将来引用。由于缺乏跨浏览器的实现，此代码不应用于生产环境。

如果您想在生产环境中添加平滑滚动，我建议您现在使用基于 javascript 的实现。