如何在页面加载时在嵌套的“ bootstrap手风琴”上打开锚点并滚动到活动（打开）手风琴的顶部

Question

我有一个嵌套的Bootstrap手风琴，像这样：

-折叠1
-----折叠1
-----折叠2
-------折叠1
-------折叠2
--Collapse2
-----折叠1
-----折叠2
-----折叠3
--Collapse3
-----折叠1
-----折叠2
-----折叠3

我的目标是：当页面加载时，我想打开所需的折叠（通过URL中的“ anchor”参数）并将浏览器窗口向下滚动。 我的代码：

$(function() {
    var searchParams = new URLSearchParams(location.search);
    var anchor = searchParams.get('anchor');
    if (!anchor) {
        throw new TypeError('There is no "anchor" parameter in the URL');
    }
    openCollapse(anchor);
});

$('#w0-collapse2').on('shown.bs.collapse', function () {
    var element =  document.getElementById('w0-collapse2');
    element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
});

function openCollapse (elementId) {
    var targetCollapse = $('#' + elementId);
    if (!targetCollapse.hasClass('collapse')) {
        throw new TypeError('error');
    }
    var parents = targetCollapse.parents('.panel-collapse').toArray().reverse();
    parents.push(targetCollapse);

    $.each(parents, function (key, object) {
        $(object).collapse('show');
    });
}

问题是折叠打开，但不会发生滚动:(
我试图循环订阅父事件并使用Deferred objects，但是它没有帮助:( 有任何想法吗？

UPD：：我认为这是因为“崩溃”不会立即呈现。如果添加计时器，这将起作用。但这是一个坏主意。如何避免这种情况？
UPD2 ：我还使用了promises添加了代码。但这也不起作用。

$(function() {
    var searchParams = new URLSearchParams(location.search);
    var anchor = searchParams.get('anchor');
    if (!anchor) {
        throw new TypeError('There is no "anchor" parameter in the URL');
    }
    openCollapse(anchor).done(function () {
        var element =  document.getElementById(anchor);
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
        console.log('It worked on main function');
    });
});

function openCollapse (elementId) {
    var promises = [];
    var targetCollapse = $('#' + elementId);
    if (!targetCollapse.hasClass('collapse')) {
        throw new TypeError('error');
    }
    var parents = targetCollapse.parents('.panel-collapse').toArray().reverse();
    parents.push(targetCollapse);

    $.each(parents, function (key, object) {
        var dfd = new $.Deferred();
        $(object).collapse('show');
        $(object).on('shown.bs.collapse', function () {
            dfd.resolve();
        });
        promises.push(dfd);
    });

    return $.when.apply($, promises).promise();
}