JQuery 滚动至 Bootstrap Modal 顶部

阅读时长 6 分钟读完

Bootstrap Modal 是一个流行的前端组件,但是当 Modal 内容超出可见区域时,用户需要手动滚动才能看到完整内容。为了提高用户体验,我们可以使用 jQuery 编写一个函数,让 Modal 在打开后自动滚动至顶部。

函数实现

我们可以利用 scrollTop() 函数将 Modal 的 scrollTop 值设置为 0,从而实现滚动至顶部的效果。代码如下:

这里给 Modal 绑定了 shown.bs.modal 事件,在 Modal 显示后执行函数。函数中,我们找到 Modal 中的 .modal-dialog 元素,并将其 scrollTop 设置为 0。

示例代码

以下是一个包含 Modal 滚动至顶部功能的示例代码:

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------ ------ -- -----------
  ----- ---------------- -----------------------------------------------------------------------------
  ------- -----------------------------------------------------------
  ------- -----------------------------------------------------------------------------------
  --------
    ---------- -- -
      ---------------------------------- -------- --- -
        -------------------------------------------
      ---
    ---
  ---------
-------
------
  ---- ------------------
    --------- ------ -- --- ---------
    ---- ------ ------- ----- ---
    ------- ------------- ---------- ------------ ------------------- -----------------------
      ---- -----
    ---------
    ---- ----- ---
    ---- ------------ ----- ------------ ------------- ------------- ------------------------------ -------------------
      ---- ---------------------
        ---- ----------------------
          ---- ---------------------
            ------- ------------- ------------- -------------------- -----------------------------------
            --- ------------------- ----------------------- ----------
          ------
          ---- -------------------
            -------- ----- ----- --- ----- ----------- ---------- ----- --- ---- --- --------- ------- ------ --- --------- ----- --- ------- ---- ---- --- ------ ----- ------- --- ------ -- ------ --- ----- ----------- ------- ----- ------- --- --- --------- ---------- ---- ----- -------- ------ --------- ------ ---- --- ---- -------- -- -------- ----- --------- ---------- ------- ----- -- ---- --------- -------------
            --------- ---- ----- - ---- ------ ---------- ----- --------- -------- ------- --- --------- ------ ----- ---- ------- ---- --------- ----- ------- ---- --- --------- ---------- ----- ------ -------- ------ ---- ------- ---- ----- -- ----- ----- -- ---- -- ------ --------- ------------
            -------- ----- ----- ------- -- ------- --- ------- ------- ---- ------- ----- ---- ---- ----- -------- --------- ----- -------- ----- -- ------ ---------- --- -------- ---- ---------- ------- ------ ------ ------ -- ------- ---- ------------ ----- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- --- -- ---- --- ----- -------- ------- ------ --------- --------- ------- ---- ------- ----- ------ ------------
            ---------- -- ---- --------- ----------- ------ -- ------- ----- ------- -- ---- --------- --------- ---- ---- ------ ------ ----- --------- ---- --- --------- -------- ----- ----- ------------ ------- -- -------- ----- --

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈