我最近一直在研究一个小型博客，希望从accordion（下面的示例）中访问连续的博客文章。这样，您可以快速浏览帖子标题，选择一个有趣的标题并阅读。完成后，您可以无缝返回浏览，而无需不必要的菜单导航。
我的问题是，一旦您读完一篇文章并单击第二篇文章，我将无法在顶部打开第二篇文章（标题可见）。由于您已经向下滚动了以阅读第一篇文章，因此您可以在第二篇文章的2/3处打开。这会迫使用户一直滚动到尚未读过的帖子的顶部。由于某种原因，我似乎什么也无法工作。任何指导将不胜感激！
更新： 事实证明，由于我使用的是jQuery的精简版，因此我尝试使用的功能不可用。现在，我已经克服了这个障碍，所有内容都可以编译，但是我不能强迫页面滚动到正确的位置。
我最接近的解决方案是此方法，当打开新部分时，它将回滚到第一个card-header（而我想单击card-header）。
$(".card-header").click(function (event) {
$('html, body').animate({
scrollTop: $(".card-header").offset().top
}, 300);
});
我想做的事在逻辑上与此等效，但是此确切的代码根本无法滚动（正确编译，并将$(this)替换为$(event.target)或$(event.target).parent()也不起作用。
$(".card-header").click(function(event) {
$('html, body').animate({
scrollTop: $(this).offset().top-60
}, 300);
这是一个再现我的奋斗的最小工作示例：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="container">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec1">Title1</a>
<div id="sec1" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec2">Title2</a>
<div id="sec2" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
</div>
答案 0 :(得分：3)
始终滚动到打开折叠元素的偏移顶部。如果收盘崩溃 如果在开头折叠上方，则从 开口塌陷的偏移顶部。
jQuery(function($){
$('.card-header').each(function(){
let $card_header = $(this);
let $collapse_element = $card_header.next();
$collapse_element.on('show.bs.collapse', function () {
let $card_header_top = $card_header.offset().top;
let $visible_collapse = $('.collapse.show');
if($visible_collapse.length){
let $visible_collapse_top = $visible_collapse.offset().top;
if($visible_collapse_top < $card_header_top){
$card_header_top -= $visible_collapse.height();
}
}
$([document.documentElement, document.body]).animate({
scrollTop: $card_header_top
});
});
});
});<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:30px"></div>
<div class="container" id="container">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec1">Title1</a>
<div id="sec1" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
<div class="card">
<a class="card-header" data-toggle="collapse" href="#sec2">Title2</a>
<div id="sec2" class="collapse" data-parent="#container">
<div class="card-body">
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
lots and lots of text
</div>
</div>
</div>
</div>
答案 1 :(得分：2)
我将id从<div class="card">到<div class="card" id="div2">的div标签中添加了ID，并添加了Javascrip：
$(".card-header").click(function () {
$('html, body').animate({
scrollTop: $("#div2").offset().top
}, 2000);
});
对我有用。您无需覆盖所有内容。
答案 2 :(得分：-1)
在事件中使用
$(document).ready(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
玩得开心