如何阻止打开MDB Modal时页面自动滚动至顶部？

核心问题 #

你触发Modal用的<a href="#">标签，点击时会触发浏览器默认锚点跳转行为——#会让页面滚动到顶部，这和MDB Modal本身无关，是a标签的默认行为没被阻止导致的。

修复步骤 #

1. 阻止a标签的默认跳转行为

修改toggleShowCarouselModal函数，接收事件参数并阻止默认行为：

const toggleShowCarouselModal = (e) => {
  e.preventDefault(); // 阻止a标签的默认跳转
  setCarouselModal(!carouselModal);
}

然后在a标签的onClick里传递事件：

<a href="#" onClick={(e) => toggleShowCarouselModal(e)}>See details</a>

2. 优化Modal配置（可选）

你的Modal已经设置了overflowScroll={false}，这个配置是正确的，能确保Modal打开时页面背景不会滚动。如果仍有异常，检查是否给Modal添加了额外滚动相关的自定义样式，或者确认MDB Modal的backdrop属性为默认的true（该属性不会导致页面滚动）。

3. 替代方案：用按钮代替a标签（更推荐）

如果这个元素不需要跳转功能，直接换成<button>标签，从根源避免默认行为问题，同时更符合语义化：

<button 
  onClick={toggleShowCarouselModal} 
  style={{ 
    background: 'none', 
    border: 'none', 
    color: 'blue', 
    textDecoration: 'underline', 
    cursor: 'pointer' 
  }}
>
  See details
</button>

无需自定义Modal #

这个问题是触发元素的默认行为导致的，和MDB Modal组件本身无关，修复触发逻辑后就能让Modal在当前页面位置正常打开，不需要替换组件。

内容的提问来源于stack exchange，提问作者Артём Орёл