如何在jQuery中实现关闭Dropdown后滚动到指定元素？

问题根源 #

你的代码存在两个核心问题导致滚动到页面顶部：

• 滚动目标计算错误：$(this).offset().top-3000会生成负数，浏览器会自动将scrollTop重置为0，直接触发顶部滚动
• 选择器语法错误：$(".dropdown-list-9 w-dropdown-list")缺少类选择器的点，无法正确选中同时包含两个类的元素

修复后的代码 #

(function ($) {
    'use strict';
    $(".hover-close").on("click", function () {
        // 缓存目标下拉菜单元素，减少重复DOM查询
        const targetDropdown = $(".dropdown-list-9.w-dropdown-list");
        targetDropdown.removeClass("w--open");
        
        $(this).next().slideToggle(300);
        // 修正选择器语法，选中同时拥有两个类的元素
        $(".dropdown-list-9.w-dropdown-list").not($(this).next()).slideUp("fast");
        
        setTimeout(() => {
            // 滚动到目标下拉菜单位置，-100为可选偏移量，可根据布局调整
            $('html, body').animate({scrollTop: targetDropdown.offset().top - 100}, 300);
        }, 400);
    });
}(jQuery));

关键修改说明 #

• 调整滚动目标：将滚动目标从按钮位置改为下拉菜单元素的位置，通过targetDropdown.offset().top获取准确坐标，附加的偏移量可避免元素紧贴页面顶部
• 修复选择器：补全类选择器的点，确保选中同时带有dropdown-list-9和w-dropdown-list类的元素
• 优化性能：用变量缓存目标元素，避免重复查询DOM树
• 提升兼容性：同时对html和body执行滚动动画，适配不同浏览器的滚动行为

内容的提问来源于stack exchange，提问作者Kim-347