如何使用CSS代码实现Bootstrap导航栏（Navbar）的点击平滑滚动？-css教程-PHP中文网

bootstrap 5 navbar 默认无平滑滚动，需手动添加 html { scroll-behavior: smooth; } 并确保 href 锚点与目标 id 严格匹配、元素可见且在文档流中；移动端折叠菜单点击后需配合 data-bs-dismiss 或 js 拦截以保障滚动生效。

如何使用css代码实现bootstrap导航栏（navbar）的点击平滑滚动？

Bootstrap 5 的 Navbar 默认不带平滑滚动，必须手动加 scroll-behavior 和 href 锚点逻辑，否则点击直接跳转、无动画。

确保导航链接指向页面内 ID 锚点

平滑滚动的前提是链接能触发浏览器原生滚动行为。Navbar 中的 <a></a> 必须使用合法的 href 值，指向当前页存在的元素 ID：

href 必须以 # 开头，例如 href="#about"，不能是 href="about" 或 href="/#about"（后者在部分路由场景下会刷新页面）
目标元素需有对应 id，如 <section id="about"></section>，且该 ID 在整个文档中唯一
避免用 JavaScript 拦截默认行为后手写 scrollTo——除非你明确需要自定义 easing 或监听滚动，否则绕过原生机制反而增加兼容性风险

启用 CSS 原生平滑滚动（最简方式）

只需一行 CSS 即可激活整个文档的平滑滚动效果，无需 JS：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

html {
  scroll-behavior: smooth;
}

注意点：

必须作用于 html 元素，写在 body 或 .navbar 上无效
Bootstrap 5 默认未设置此项，所以必须显式添加
所有支持 scroll-behavior 的浏览器（Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+）都会生效；旧版 Safari 需要额外 polyfill 或降级处理

修复 Bootstrap 5 移动端折叠菜单点击后不滚动的问题

当 Navbar 折叠为汉堡菜单时，点击链接会先关闭菜单，再触发滚动——但有时关闭动画未完成，scroll-behavior 就已开始执行，导致滚动偏移或失效：

给折叠菜单的 data-bs-toggle="collapse" 目标（通常是 .navbar-collapse）加 data-bs-dismiss="collapse"，让 Bootstrap 自动在点击后关闭菜单
确保链接本身不在 .dropdown 内部——Dropdown 项点击默认不触发 scroll-behavior，需手动绑定 click 事件并调用 element.scrollIntoView({ behavior: 'smooth' })

如果用了 offset（比如固定顶栏遮挡标题），不能只靠 CSS，得用 JS 补偿：

document.querySelectorAll('.navbar-nav a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
      // 手动滚动时，需减去 navbar 高度
      window.scrollBy(0, -56); // 假设 navbar 高 56px
    }
  });
});

真正容易被忽略的是：平滑滚动是否生效，和页面是否有完整文档流、目标元素是否可滚动、以及是否被 overflow: hidden 截断强相关——哪怕 CSS 写对了，一个父容器的 overflow 设置错，就全白搭。