Bootstrap Modal内同页锚点链接点击后无法跳转至目标区域问题咨询

问题原因 #

1. Bootstrap 5 模态框关闭时自带300ms淡出过渡动画，动画执行过程中body的滚动限制（模态框默认给body加的overflow: hidden属性）还未完全解除，此时触发的锚点跳转逻辑会被模态框的内置逻辑拦截
2. 你给Contact按钮同时设置了href锚点、data-bs-dismiss、data-bs-toggle三个触发属性，多个事件执行顺序冲突，锚点跳转优先级被模态框关闭逻辑覆盖
3. 之前尝试的重载页面逻辑不可行：页面重载后所有上下文执行栈都会被清空，重载前调用的scrollIntoView不会在新加载的页面中生效

解决方案 #

方案一（推荐，保留模态框动画） #

监听Bootstrap模态框的hidden.bs.modal生命周期事件，该事件会在模态框完全关闭、动画结束、body滚动限制解除后触发，此时执行滚动逻辑不会被拦截。

1. 先修改Contact按钮的代码，移除冲突属性：

<a id="contactBtn" class="btn-grad" href="javascript:void(0)" style="cursor:pointer;font-weight:500!important" data-bs-dismiss="modal">Contact me</a>

2. 新增JS逻辑：

const modalDom = document.getElementById('exampleModalToggle')
const kontaktDom = document.getElementById('kontakt')
let isContactClick = false

// 点击contact按钮时标记状态
document.getElementById('contactBtn').addEventListener('click', () => {
  isContactClick = true
})

// 监听模态框完全关闭事件
modalDom.addEventListener('hidden.bs.modal', () => {
  if (isContactClick) {
    // 滚动到目标元素，behavior设为auto可关闭平滑滚动效果
    kontaktDom.scrollIntoView({ behavior: 'smooth', block: 'start' })
    // 如需地址栏显示锚点可放开下面的注释
    // history.pushState(null, null, '#kontakt')
    isContactClick = false
  }
})

方案二（无JS改动，关闭模态框动画） #

给模态框元素添加data-bs-animation="false"属性，关闭模态框的过渡动画，此时锚点跳转不会被动画逻辑拦截，原有代码的锚点可正常生效：

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1" data-bs-animation="false">

注意事项 #

请确保页面内id="kontakt"的元素唯一，重复id会导致scrollIntoView无法定位到目标元素。

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