Bootstrap 覆盖手风琴滚动，滚动到锚点

编程问答 2022-05-12

问题描述

我有以下脚本可以在单击手风琴按钮时滚动到某个部分的顶部

        $(document).on('shown.bs.collapse','.collapse',function () {
            var open_accordion = $(this).prev('[data-toggle="collapse"]').attr('id');
            $('#edit-form input[name="accordion_hash"]').val(open_accordion);
            var target = 'Tab Open - ' + open_accordion;
            // Make sure the clicked accordion is scrolled into view
            $('html,body').animate({
                scrollTop: $('#' + open_accordion).offset().top - 100
            },300);
        }).on('hidden.bs.collapse',function () {
            $('#edit-form input[name="accordion_hash"]').val('');
        });

当单击按钮/href 时我想滚动到 a 选项卡中的特定锚点时，有一种特殊情况。因此，在下面的代码中，通常当点击 <div class="card-header collapsed" 时，我希望它打开到选项卡的顶部（如上面的代码所做的那样）。但是当点击特殊护理链接时，我希望它滚动到那里。

<a href='#link-here'>Special Case</a>
<div class="accordion mb-3" id="provider-accordion">
    <div class="card">
        <div class="card-header collapsed" id="section1" data-toggle="collapse" data-target="#section1-content" aria-expanded="false" aria-controls="section1-content">
            <h2 class="mb-0 text-primary">
                Section 1
            </h2>
        </div>
        <div id="section1-content" class="collapse" aria-labelledby="section1" data-parent="#provider-accordion">
            <div class="card-body">
                 <p>Some content</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header collapsed" id="section2" data-toggle="collapse" data-target="#section2-content" aria-expanded="false" aria-controls="section2-content">
            <h2 class="mb-0 text-primary">
                Section 2
            </h2>
        </div>
        <div id="section2-content" class="collapse" aria-labelledby="section2" data-parent="#provider-accordion">
            <div class="card-body">
                 <p>Some content</p>
                 <p id="link-here">Scroll here instead</p>
            </div>
        </div>
    </div>
</div>

对于特殊情况，我目前正在使用以下内容，但这只是滚动到部分顶部。我不知道如何进入，因为我必须等待手风琴打开然后覆盖之前的代码

<a data-toggle="collapse" href="#section2-content" aria-expanded="false" aria-controls="section2">Special Case</a>

我希望这是有道理的

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-accordionhtmljavascriptjquery