html运行实例（cssref_scroll-behavior）-搜寻教程库

代码示例：（标识：cssref_scroll-behavior）

<!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}
</style>
</head>
<body>

<h1>平滑的滚动</h1>

<div class="main" id="section1">
  <h2>第一章</h2>
  <p>请点击链接来查看平滑的滚动效果。</p>
  <a href="#section2">点击我会平滑滚动到下面的第二章</a>
  <p class="note"><span>注释：</span>删除 scroll-behavior 属性可清楚平滑滚动。</p>
</div>

<div class="main" id="section2">
  <h2>第二章</h2>
  <a href="#section1">点击我可平滑滚动到上面的第一章</a>
</div>

<p><b>注释：</b>Internet Explorer 不支持 scroll-behavior 属性。</p>

</body>
</html>