如何解决Bootstrap 覆盖手风琴滚动,滚动到锚点
我有以下脚本可以在单击手风琴按钮时滚动到某个部分的顶部
$(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 举报,一经查实,本站将立刻删除。