本教程将指导您如何利用CSS的scroll-behavior属性为网页添加平滑滚动效果，显著提升用户体验。通过简单的CSS代码，您可以实现页面内部跳转或程序化滚动的平滑过渡，告别生硬的瞬时跳转。同时，文章也将澄清其与复杂鼠标跟随动画的区别。
理解 scroll-behavior 属性
在网页开发中，当用户点击一个锚点链接或通过javascript指令滚动页面时，默认行为通常是瞬时跳转到目标位置，这可能会显得生硬。css3引入的scroll-behavior属性提供了一种简单而强大的方式来改变这种默认行为，使其变为平滑的动画过渡。
scroll-behavior 属性主要用于控制滚动容器（通常是浏览器视口或具有滚动条的元素）的滚动方式。它有两个主要值：
- auto (默认值)：滚动会立即跳转到目标位置，没有任何动画效果。
- smooth：滚动会以平滑的动画方式过渡到目标位置，提供更舒适的视觉体验。
实现网页平滑滚动
要为整个网页启用平滑滚动效果，只需将scroll-behavior: smooth;规则应用到html元素上。这是因为html元素代表了整个文档的根，对其设置的滚动行为会影响到所有由浏览器触发的页面滚动。
html { scroll-behavior: smooth; }
将上述CSS代码添加到您的样式表中后，以下场景将自动获得平滑滚动效果：
- 锚点链接跳转： 当用户点击<a>标签，其href属性指向页面内部的某个ID（例如<a href=”#section-id”>），页面将平滑滚动到该ID对应的元素。
- JavaScript程序化滚动： 当使用Element.scrollIntoView()、window.scrollTo()或window.scrollBy()等JavaScript方法触发滚动时，如果目标滚动容器设置了scroll-behavior: smooth;，滚动过程也将是平滑的。
示例代码
为了更好地演示scroll-behavior: smooth;的效果，我们来看一个简单的HTML结构和对应的CSS：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>平滑滚动示例</title> <style> html { scroll-behavior: smooth; /* 启用平滑滚动 */ } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } nav { position: fixed; top: 0; width: 100%; background-color: #333; padding: 10px 0; text-align: center; z-index: 1000; } nav a { color: white; text-decoration: none; margin: 0 15px; font-size: 18px; } section { height: 100vh; /* 使每个section占据一个视口高度 */ display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; margin-top: 50px; /* 留出导航栏空间，避免被fixed导航栏遮挡 */ } #section1 { background-color: #f44336; } #section2 { background-color: #2196f3; } #section3 { background-color: #4caf50; } #section4 { background-color: #ff9800; } </style> </head> <body> <nav> <a href="#section1">章节一</a> <a href="#section2">章节二</a> <a href="#section3">章节三</a> <a href="#section4">章节四</a> </nav> <section id="section1"> <h1>欢迎来到章节一</h1> </section> <section id="section2"> <h1>这是章节二</h1> </section> <section id="section3"> <h1>继续到章节三</h1> </section> <section id="section4"> <h1>最后是章节四</h1> </section> </body> </html>
在上述示例中，当您点击导航栏中的任意链接时，页面将不再瞬时跳转，而是平滑地滚动到对应的章节。
浏览器兼容性
scroll-behavior属性在现代浏览器中得到了广泛支持，包括Chrome、Firefox、edge、Safari以及Opera。对于一些较旧的浏览器版本，可能不支持此属性，但它是一个渐进增强的特性，不支持时页面仍能正常工作，只是滚动效果会回到默认的瞬时跳转。通常情况下，无需为它添加浏览器前缀。
注意事项
在使用scroll-behavior: smooth;时，需要考虑以下几点：
- 功能范围： scroll-behavior: smooth; 主要用于实现页面内部锚点跳转或JavaScript触发的滚动行为的平滑过渡。它并非用于实现复杂的鼠标跟随动画、视差滚动或3D交互效果。用户在问题中提及的示例网站（如marvinx.com）通常涉及更高级的JavaScript库（例如Three.js）和复杂的动画逻辑，这些超出了scroll-behavior属性的能力范围。
- 用户体验与性能： 尽管平滑滚动能提升视觉舒适度，但在某些需要快速、即时响应的场景下，例如在长文档中频繁跳转，过于缓慢的滚动动画可能会降低效率，甚至让部分用户感到不适。此外，对于非常复杂的页面或大量元素进行滚动时，过度使用平滑滚动也可能对页面性能产生轻微影响。建议在设计时权衡用户体验和性能需求。
- 辅助功能： 对于依赖键盘导航或屏幕阅读器的用户，平滑滚动可能会引入额外的延迟。确保您的网站在启用平滑滚动后，仍然保持良好的可访问性。
总结
CSS的scroll-behavior属性提供了一种极其简洁高效的方式来为网页添加平滑滚动效果，显著提升了用户在页面内部导航时的视觉体验。通过简单地在html元素上设置scroll-behavior: smooth;，您就可以让锚点链接和程序化滚动变得更加流畅。然而，重要的是要明确其功能边界，它主要处理页面滚动行为，而非复杂的JavaScript动画或3D交互。合理利用这一属性，可以使您的网页更具现代感和用户友好性。
css javascript java css3 html js 浏览器 edge safari win 区别 JavaScript firefox css chrome safari css3 html edge auto JS href 样式表