我的网站上有bootatrsp手风琴。在一个手风琴小组中，我有很多内容。当我向下滚动以阅读其余内容然后单击下一个面板，然后上面的那个（打开）关闭并向上移动。其余的面板随着它向上移动，现在我看不到相关的内容，因为它向上滚动。 如何让手风琴的开放式面板始终处于屏幕的视口中，而不是我点击的面板。
这是我使用的代码：
<div class="row divAccordion" id="referNav">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default visible-True">
https://box.2beweb.chttps://jsfiddle.net/tartash/y5nc0u4w/3/# <a name="collapseOne"></a>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a id="referLink1" class="openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-plus-circle fa-minus-circle"></i>
Lorem Ipsum
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus
eros, a consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue
erat et elit fringilla, at feugiat dolor luctus. Nulla facilisi.
</div>
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-True">
<a name="collapseTwo"></a>
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a id="referLink2" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-plus-circle"></i>
Duis
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc sed porta libero, ac interdum urna.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseThree"></a>
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a id="referLink3" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-plus-circle"></i>
Aliquam
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis,
tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium
vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in
dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseFour"></a>
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a id="referLink4" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-plus-circle"></i>
Lorem ipsum dolor
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus eros, a
consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue erat et elit
fringilla, at feugiat dolor luctus. Nulla facilisi. Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc
sed porta libero, ac interdum urna. Fusce quis libero eu neque congue gravida et vitae mi. Mauris egestas ex eu neque consequat suscipit. In mattis diam non metus luctus rhoncus. Donec elementum consectetur ipsum, vel fringilla leo ullamcorper
sit amet. Sed vestibulum pretium rutrum. Pellentesque hendrerit ipsum magna, aliquam vestibulum justo varius in. Proin iaculis velit felis, at posuere nunc mattis quis. Mauris mattis lectus in tempus volutpat. Curabitur sed nibh vel tellus aliquet
faucibus. Maecenas sit amet enim ullamcorper, fringilla odio vitae, elementum metus. Quisque at justo vitae lectus porttitor pretium. Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat
odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis, tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere
sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla
orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit. Integer luctus dapibus
sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa sem, mattis
in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis cursus tellus
suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra feugiat arcu
nec tempor. Quisque tempor vitae arcu non euismod. Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus
lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae, molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla
dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis.
Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis mauris velit, et dictum ex scelerisque et.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseFive"></a>
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a id="referLink5" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><i class="fa fa-plus-circle"></i>
Nullam eu sem
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae,
molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit
pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis. Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis
mauris velit, et dictum ex scelerisque et.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-True">
<a name="collapseSix"></a>
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a id="referLink6" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"><i class="fa fa-plus-circle"></i>
Integer luctus
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
Integer luctus dapibus sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa
sem, mattis in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis
cursus tellus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra
feugiat arcu nec tempor. Quisque tempor vitae arcu non euismod.
</div>
</div>
<!------------------------------------------------------------------->
</div>
</div>
</div>
提前谢谢