如何关闭jQuery dialog时阻止页面上下滚动？

这个问题的核心原因是jQuery UI Dialog在关闭过程中，默认会尝试将焦点还原到触发打开的元素，或是模态遮罩移除后页面布局变化引发了滚动行为。以下是几种针对性的解决办法：

方法1：记录并恢复滚动位置 #

在Dialog打开时记录当前页面的滚动位置，关闭完成后强制恢复该位置：

修改你的JavaScript代码，添加滚动位置存储变量和对应回调：

$(function() {
  // 存储滚动位置的变量
  let scrollPosition = 0;

  $('#text1').hide();

  $('#text1').dialog({
      autoOpen: false,
      modal: true,
      title: 'Bird',
      width: 50,
      resizable: false,
      show: 'explode',
      hide: 'explode',
      closeText: null,
      open: function() {
        $('.ui-dialog-titlebar-close').hide();
        // 打开弹窗时记录当前滚动位置
        scrollPosition = $(window).scrollTop();
      },
      close: function() {
        // 关闭后恢复之前的滚动位置
        $(window).scrollTop(scrollPosition);
      }
    }).prev('.ui-dialog-titlebar').css({
      'background-color': '#f8d40c',
      'color': '#333333',
      'text-align': 'center',
      'display': 'block',
      'margin': 'auto',
      'border-radius': '5px',
      'font-size': '25px'
    });

  $('#text1').css('background-color', '#e3d47f');

  $('#click1').on('click', function() {
    $('#text1').dialog('option', 'position', {
      at: 'left top',
      of: this
    }).dialog('open');
    return false;
  });

  $('body').on('click', '.ui-widget-overlay', function() {
    $('#text1').dialog('close');
    // 点击遮罩关闭时也恢复滚动位置
    $(window).scrollTop(scrollPosition);
  });
});

方法2：阻止Dialog的默认焦点跳转 #

jQuery UI Dialog关闭后会自动聚焦到触发元素，这可能导致页面滚动到该元素位置。可以在关闭回调里阻止这个行为：

close: function() {
  // 阻止Dialog自动聚焦到触发元素
  $(this).dialog('widget').find(':focus').blur();
  // 同时恢复滚动位置
  $(window).scrollTop(scrollPosition);
}

方法3：调整关闭动画的影响 #

你使用了hide: 'explode'动画，动画执行过程中可能导致页面布局计算异常。如果前两种方法无效，可以先测试移除动画：

hide: false // 替换原来的'explode'

如果问题消失，说明是动画导致的，可以改用更温和的动画（比如fade），或者在动画完成后恢复滚动：

hide: {
  effect: 'explode',
  duration: 300,
  complete: function() {
    $(window).scrollTop(scrollPosition);
  }
}

另外建议：你的Dialog配置拆分成了多个对象传入，合并成一个对象会让代码更清晰，也能避免潜在的配置冲突。

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