<!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>第 1 节</h2>
<p>点击链接可以看到“平滑”的滚动效果。</p>
<a href="#section2">单击我以平滑滚动到下面的第 2 部分</a>
<p>注意：删除 scroll-behavior 属性以删除平滑滚动。</p>
</div>
<div class="main" id="section2">
<h2>第 2 节</h2>
<a href="#section1">单击我以平滑滚动到上面的第 1 部分</a>
</div>
<p><strong>注意：</strong> Internet Explorer 不支持 scroll-behavior 属性。</p>
</body>
</html>