如何在Bulma模态卡片内点击按钮跳转/滚动到指定div？

我之前也碰到过这个坑！Bulma的模态框默认会给内部按钮绑定关闭逻辑，要么是事件冒泡触发了模态框的关闭事件，要么是按钮本身带了默认的关闭属性，咱们分几种情况来解决：

一、阻止事件冒泡（最通用的解法） #

你的原代码没有阻止按钮点击事件的冒泡，导致事件传递到模态框的父元素时触发了关闭逻辑。修改代码，加上e.stopPropagation()即可：

$('#scroll_bottom').click(function(e) {
  // 阻止事件向上冒泡，避免触发模态框的关闭机制
  e.stopPropagation();
  $('html, body').animate({
    scrollTop: ($('#bottom').first().offset().top)
  }, 500);
});

二、检查按钮的默认属性 #

如果你的按钮带有data-dismiss="modal"属性，Bulma会自动给它绑定关闭模态框的事件，直接把这个属性删掉就行：

<!-- 原来的按钮（会触发关闭） -->
<button id="scroll_bottom" data-dismiss="modal">滚动到底部</button>

<!-- 修改后的按钮 -->
<button id="scroll_bottom">滚动到底部</button>

另外如果按钮在表单里，要确保按钮类型是type="button"，而不是默认的type="submit"（submit会触发表单提交，间接导致模态框关闭）：

<button id="scroll_bottom" type="button">滚动到底部</button>

三、如果是模态框内部的滚动（目标div在模态框里） #

如果#bottom是在模态卡片内部，那你应该滚动模态框的内容容器，而不是整个页面的html/body。比如Bulma的模态卡片内容区是.modal-card-body，代码要调整成这样：

$('#scroll_bottom').click(function(e) {
  e.stopPropagation();
  // 获取模态框的滚动容器
  const modalScrollContainer = $('.modal-card-body');
  // 计算目标元素相对于容器的偏移量
  const targetOffset = $('#bottom').offset().top - modalScrollContainer.offset().top;
  // 滚动容器到目标位置
  modalScrollContainer.animate({
    scrollTop: targetOffset
  }, 500);
});

这样就能实现模态框内部的平滑滚动，同时不会触发模态框关闭啦！

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