重写jQuery UI对话框关闭逻辑，避免页面自动滚动到顶部

我之前也遇到过一模一样的问题，太懂这种明明没动滚动条却被强制拉到顶部的烦躁了！你分析的方向没错——jQuery UI对话框的close方法里确实有一段逻辑会触发页面滚动，通常是在关闭后尝试将焦点重置到触发元素，或者清理对话框DOM时的操作间接导致了滚动。

不用修改库文件也能完美解决，给你几个靠谱的方案：

方案1：全局重写对话框的close方法（所有对话框生效） #

这个方法会修改jQuery UI对话框的原型，对页面上所有对话框都生效，适合全局统一处理：

// 先备份原始的close方法，避免丢失原有功能
$.ui.dialog.prototype._originalClose = $.ui.dialog.prototype.close;

// 重写close方法，加入滚动位置保存与恢复逻辑
$.ui.dialog.prototype.close = function() {
    // 关闭前记录当前页面滚动位置
    const currentScrollTop = $(window).scrollTop();
    
    // 执行原始的close逻辑
    this._originalClose.apply(this, arguments);
    
    // 恢复之前的滚动位置
    $(window).scrollTop(currentScrollTop);
};

方案2：针对单个对话框绑定事件（局部处理） #

如果你只需要解决某个特定对话框的问题，可以在初始化对话框时绑定open和close事件，手动保存和恢复滚动位置：

$("#your-dialog-selector").dialog({
    open: function() {
        // 打开对话框时，把当前滚动位置存在对话框元素的data属性里
        $(this).data("savedScrollTop", $(window).scrollTop());
    },
    close: function() {
        // 关闭时取出保存的位置，恢复页面滚动
        const savedScroll = $(this).data("savedScrollTop");
        $(window).scrollTop(savedScroll);
    }
});

方案3：阻止焦点重置触发的滚动（针对焦点导致的场景） #

有时候滚动是因为对话框关闭后强制把焦点移回了页面顶部的元素（比如body），这种情况可以在close事件里阻止默认行为，再手动处理关闭：

$("#your-dialog-selector").dialog({
    open: function() {
        $(this).data("savedScrollTop", $(window).scrollTop());
    },
    close: function(event) {
        // 阻止默认的焦点重置行为
        event.preventDefault();
        
        // 手动关闭并清理对话框
        $(this).dialog("destroy").remove();
        
        // 恢复滚动位置
        $(window).scrollTop($(this).data("savedScrollTop"));
    }
});

你可以根据自己的场景选择合适的方案，亲测这些方法都不需要修改jQuery UI的源码，完全在自己的业务代码里就能解决问题～

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