我有一个引导折叠面板。在其中，我将切换链接的底部放置在内容的底部，因此单击该链接时它会上下移动。
问题
我有一长串内容。当用户单击切换时，我需要将用户移至顶部。但是在这里，当我展开菜单并单击折叠时，它将一直到页面底部。而不是我需要将用户移动到页面顶部。我试图设置偏移量的顶部，但没有运气。
有什么主意吗？
我的Jquery
$('html,body').animate({
scrollTop: $(".collapsed").offset().top
},500);
答案 0 :(得分：1)
您可以通过将事件侦听器附加到切换元素，然后检查pannel-collapse元素的类来实现滚动。
$('#accordion .panel-heading a').on('click', function (event) {
let panelCollapse = $(this).closest('.panel').find('.panel-collapse');
if (!panelCollapse.hasClass('collapse')) {
$('html, body').animate({
scrollTop: panelCollapse.offset().top
}, 500);
}
});
答案 1 :(得分：1)
如果我正确理解，隐藏折叠区域时需要滚动顶部，请尝试使用此功能。崩溃具有hide.bs.collapse事件，该事件会在调用hide方法后立即触发，崩溃的默认间隔为350ms，因为您不会看到网站的结尾，所以滚动间隔应小于默认值。< / p>
对不起，我英语不好...
更新
我重新阅读了所有评论，您的问题是，您尝试滚动到切换按钮而不是折叠区域，当区域未关闭并且滚动到底部时滚动到按钮，只需滚动到panel-collapse。 ...
$(document).ready(function() {
$('.panel-collapse').on('hide.bs.collapse show.bs.collapse', function(e) {
$('html, body').animate({
scrollTop: $(e.target).offset().top - 20
}, 150);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
</div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a po</p>
</div>
<!-- dib -->
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
<br><br><br><br><br><br><br><br>
<!-- roew -->
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
</div>