一行CSS实现页面上下滑动【scroll-behavior: smooth；】
邓禄
实现上下滑动的主要属性：scroll-behavior: smooth;
一般添加在html或者body标签上
代码直接复制测试
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: black;
}
#section2 {
height: 600px;
background-color: skyblue;
}
</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>```
类似资料：