Html Bootstrap 手风琴：折叠或展开元素时如何避免页面滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28977499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap accordion: how to avoid page scroll when collapse or expand elements
提问by Alendorff
I have unexpected page scrolling when try to collapse or expand elements of the accordion. Maybe I just doing something wrong with bootstrap grid system? Here is example of page:
尝试折叠或展开手风琴元素时出现意外的页面滚动。也许我只是在引导网格系统上做错了什么？下面是页面示例：
How can I avoid this irritative effect?
jsfiddle available https://jsfiddle.net/Lfwvtyms/1/
我怎样才能避免这种刺激性影响？
jsfiddle 可用https://jsfiddle.net/Lfwvtyms/1/
<body>
<!--default navbar here-->
<main>
<h1>Long long long long long long header header header header header header lng lasd lewq j</h1>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="task-list">
<div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">
<div class="panel panel-default">
<div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div>
<div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a
data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div>
<div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
</ul>
</div>
</div>
</div>
</div>
<div id="someDiv">
<div class="row">
<div class="col-xs-12">
<div id="dummy">Div with fixed height here</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid">my footer here</footer>
</body>
采纳答案by Pavol Kolencin
I had same problem (jump to the top on click to the link which was triggering the collapse toggle)
the href="#"was changed to href="javascript:void(0);"and it is working great (toggling collapse without any scrolling to the top)
我遇到了同样的问题（点击触发折叠切换的链接跳到顶部）href="#"已更改为href="javascript:void(0);"并且运行良好（切换折叠而不滚动到顶部）
回答by Diego López
Replace the hrefproperties on the aelements to #rather than, for example, #collapseOne
将元素href上的属性替换为a，#而不是，例如，#collapseOne
instead of this:
而不是这个：
<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
do this
做这个
<a data-toggle="collapse" data-target="#collapseTwo" href="#"
aria-expanded="true" aria-controls="collapseTwo">
回答by Simmy
I had the same issue. It turns out the href causes the problem. If you don't want the page to scroll at all when you collapse/expand, which is what I wanted, then simply remove the href altogether. Leaving it as # still made the screen scroll to the top for me.
我遇到过同样的问题。结果是href导致了问题。如果您在折叠/展开时根本不希望页面滚动，这正是我想要的，那么只需完全删除 href。将其保留为 # 仍然使屏幕滚动到我的顶部。
did not work for me:
对我不起作用：
<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>
worked:
工作：
<a data-toggle="collapse" data-target="#collapseOne"></a>
See my update here: https://jsfiddle.net/Lfwvtyms/5/
在此处查看我的更新：https: //jsfiddle.net/Lfwvtyms/5/
回答by elarctheitroadis
I had the same problem and I found my solution with this answer on another post.
我遇到了同样的问题，我在另一篇文章中找到了这个答案的解决方案。
Nothing else worked except for this tiny piece of Javascript added to my custom .js file. It smoothly brings the focus back to the selected panel title. The only thing I changed to suit my design was the distance to the top, on line 6.
除了添加到我的自定义 .js 文件中的一小段 Javascript 之外，没有其他任何工作。它顺利地将焦点带回到选定的面板标题。我改变以适应我的设计的唯一一件事是到顶部的距离，在第 6 行。
https://stackoverflow.com/a/38180220/4844273
https://stackoverflow.com/a/38180220/4844273
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top - 130
}, 500);
});
回答by jtenclay
Another option is to use buttons instead of anchor links, so that no hrefis triggered in the first place. For example, instead of the first <a>:
另一种选择是使用按钮而不是锚链接，以便href首先触发no 。例如，而不是第一个<a>：
<button data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
First list
</button>
There are lots of examples using <button>instead of <a>in this documentation.
有很多的例子使用<button>，而不是<a>在这个文件。
回答by user2812481
You can override the click handler and use the preventDefault()method on the click event:
您可以覆盖点击处理程序并preventDefault()在点击事件上使用该方法：
$('.aHandler').click( function(event) {
event.preventDefault();
...
});
Where the 'aHandler' is a class on your 'a' tags: <a class="aHandler" ...>...</a>, or is any other valid jquery selector.
其中 'aHandler' 是您的 'a' 标签上的一个类：<a class="aHandler" ...>...</a>，或者是任何其他有效的jquery 选择器。
回答by thebrownkid
$('.panel-group').on('click', function(){
$('html,body').stop();
});
$('.panel-group').on('click', function(){
$('html,body').stop();
});
This would definitely work if you are out of options.
如果您别无选择，这肯定会奏效。
