📅 最后修改于: 2023-12-03 15:14:21.779000 🧑 作者: Mango
在网页设计中，平滑滚动是一种经常使用的效果。鼠标滚轮滚动页面时，页面内容会以平滑的方式向上或向下滚动，而不是瞬间跳跃。这种效果可以使用户阅读页面内容更加舒适。
在本文中，我们将介绍如何使用 CSS 实现平滑滚动效果。以下是实现所需的代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
</ul>
</nav>
</header>
<main>
<section id="section-1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac leo vitae urna tempor consectetur. Aliquam erat volutpat.</p>
</section>
<section id="section-2">
<h2>Section 2</h2>
<p>Nulla viverra dolor in blandit placerat. Nunc congue a libero vel ullamcorper. Sed id lacus euismod, accumsan diam in, facilisis ante.</p>
</section>
<section id="section-3">
<h2>Section 3</h2>
<p>Suspendisse pretium nulla purus, sed vestibulum mauris blandit sit amet. In condimentum libero erat, nec fermentum neque ultricies vel.</p>
</section>
<section id="section-4">
<h2>Section 4</h2>
<p>Maecenas id dignissim felis. Sed auctor accumsan orci, id dignissim dui ullamcorper eu. Sed ultrices nec elit eu iaculis.</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
在上面的 HTML 示例中，我们创建了一个具有四个部分的页面，每个部分都有唯一的 ID。 在导航栏上添加了一个菜单，其中每个菜单项都链接到不同的页面部分。
为了实现平滑滚动效果，我们使用以下 CSS：
html {
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
font-size: 1.2em;
padding: 10px 20px;
transition: all 0.3s ease-in-out;
}
nav a:hover {
background-color: #fff;
color: #333;
}
在上述 CSS 中，我们为 html 元素指定了属性 scroll-behavior: smooth;，这使得浏览器将滚动行为设置为平滑滚动。
我们还创建了一个固定到顶部的导航栏，并为链接添加了缓和效果，这使用户能够以平滑的方式滚动到页面各个部分。
在 JavaScript 中，我们还需要为每个链接添加滚动事件监听器。
const nav = document.querySelector('nav');
nav.addEventListener('click', function (event) {
event.preventDefault();
if (event.target.tagName === 'A') {
const section = document.querySelector(event.target.hash);
section.scrollIntoView({
behavior: 'smooth'
});
}
});
在上述 JavaScript 中，我们使用 event.preventDefault() 防止默认链接行为（直接跳转到指定位置），并使用 event.target.tagName === 'A' 仅在链接被点击时执行代码。
最后，我们使用 scrollIntoView() 滚动页面到相应的部分。这将把指定的页面部分滚动到视图中心，使用 behavior: 'smooth' 选项使滚动过程平滑。
以上就是实现 CSS 平滑滚动效果较完整的解释。我们希望这能帮助那些追求更好用户体验的程序员。