Bootstrap Modal 是一个流行的前端组件,但是当 Modal 内容超出可见区域时,用户需要手动滚动才能看到完整内容。为了提高用户体验,我们可以使用 jQuery 编写一个函数,让 Modal 在打开后自动滚动至顶部。
函数实现
我们可以利用 scrollTop() 函数将 Modal 的 scrollTop
值设置为 0,从而实现滚动至顶部的效果。代码如下:
$('#myModal').on('shown.bs.modal', function (e) { $(this).find('.modal-dialog').scrollTop(0); });
这里给 Modal 绑定了 shown.bs.modal
事件,在 Modal 显示后执行函数。函数中,我们找到 Modal 中的 .modal-dialog
元素,并将其 scrollTop
设置为 0。
示例代码
以下是一个包含 Modal 滚动至顶部功能的示例代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ------ -- ----------- ----- ---------------- ----------------------------------------------------------------------------- ------- ----------------------------------------------------------- ------- ----------------------------------------------------------------------------------- -------- ---------- -- - ---------------------------------- -------- --- - ------------------------------------------- --- --- --------- ------- ------ ---- ------------------ --------- ------ -- --- --------- ---- ------ ------- ----- --- ------- ------------- ---------- ------------ ------------------- ----------------------- ---- ----- --------- ---- ----- --- ---- ------------ ----- ------------ ------------- ------------- ------------------------------ ------------------- ---- --------------------- ---- ---------------------- ---- --------------------- ------- ------------- ------------- -------------------- ----------------------------------- --- ------------------- ----------------------- ---------- ------ ---- ------------------- -------- ----- ----- --- ----- ----------- ---------- ----- --- ---- --- --------- ------- ------ --- --------- ----- --- ------- ---- ---- --- ------ ----- ------- --- ------ -- ------ --- ----- ----------- ------- ----- ------- --- --- --------- ---------- ---- ----- -------- ------ --------- ------ ---- --- ---- -------- -- -------- ----- --------- ---------- ------- ----- -- ---- --------- ------------- --------- ---- ----- - ---- ------ ---------- ----- --------- -------- ------- --- --------- ------ ----- ---- ------- ---- --------- ----- ------- ---- --- --------- ---------- ----- ------ -------- ------ ---- ------- ---- ----- -- ----- ----- -- ---- -- ------ --------- ------------ -------- ----- ----- ------- -- ------- --- ------- ------- ---- ------- ----- ---- ---- ----- -------- --------- ----- -------- ----- -- ------ ---------- --- -------- ---- ---------- ------- ------ ------ ------ -- ------- ---- ------------ ----- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- --- -- ---- --- ----- -------- ------- ------ --------- --------- ------- ---- ------- ----- ------ ------------ ---------- -- ---- --------- ----------- ------ -- ------- ----- ------- -- ---- --------- --------- ---- ---- ------ ------ ----- --------- ---- --- --------- -------- ----- ----- ------------ ------- -- -------- ----- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------