如何通过HTML/CSS禁用Bootstrap 5的平滑滚动功能？

全局禁用（所有锚点） #

CSS 方法 #

Bootstrap 默认会给根元素（<html>）设置 scroll-behavior: smooth 实现平滑滚动，你可以通过强制覆盖该样式禁用全局平滑滚动：

html {
  scroll-behavior: auto !important;
}

!important 用于确保该样式优先级高于 Bootstrap 默认样式，避免被覆盖。

HTML 方法 #

如果页面是通过 Bootstrap 滚动监听（Scrollspy）组件触发的平滑滚动，直接移除相关触发属性即可：

• 移除 <body> 或目标容器上的 data-bs-spy="scroll" 属性
• 移除对应的 data-bs-target 属性（若存在）

局部禁用（特定锚点） #

若只需禁用部分锚点的平滑滚动，可采用以下两种方式：

1. 内联样式：给目标锚点直接添加样式

<a href="#section1" style="scroll-behavior: auto;">跳转到章节1</a>

2. 自定义类：先定义CSS类，再给锚点添加该类

.no-smooth-scroll {
  scroll-behavior: auto !important;
}

<a href="#section2" class="no-smooth-scroll">跳转到章节2</a>

注：以上方案适配 Bootstrap 5 版本，旧版本（Bootstrap 4及以下）通过覆盖 scroll-behavior 样式同样生效。

内容的提问来源于stack exchange，提问作者jsol