相关疑难解决方法(0)

我正在寻找一个代码,该代码可以滚动到我的bootstrap 3 html/css手风琴的当前活动面板标题的顶部.我在stackoverflow上找到的最接近的解决方案是以下js的片段.

此代码段工作得相当好,但是当单击面板标题时,页面会滚动,使得面板内容的最顶部与屏幕顶部齐平.有没有办法修改它,以便滚动效果将导致面板"标题"(而不是面板内容区域的顶部)在屏幕顶部可见？

    $(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
    var offset = $('.panel.panel-default > .panel-collapse.in').offset();
    if(offset)$('html,body').scrollTop(offset.top); }); });

如果我也应该分享bootstrap手风琴html,请告诉我.

看来我的问题已经在这里得到了回答——这正是我正在寻找的功能。但是随着 Bootstrap 4 的新版本，他们将手风琴改为使用卡片，而不是面板。我无法整理 js 以适应他们的新结构。

基于 BS3 的答案，我觉得它应该是这样的，但我无法让它工作：

$('.card-header').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  $('html,body').animate({
    scrollTop: $card.offset().top
  }, 500);
});

BS4 手风琴的 HTML 如下：

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non …

我最近一直在写一个小博客，并希望可以从手风琴中访问连续的博客文章（下面的示例）。这样，您可以快速浏览帖子标题，选择一个有趣的并阅读。完成后，您可以无缝返回浏览，而无需进行不必要的菜单导航。

我的问题是，一旦你读完一篇文章并点击第二篇文章，我就无法让第二篇文章在顶部打开，标题可见。由于您已经向下滚动阅读了第一篇文章，因此您打开了第二篇文章的 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);  

这是重现我的挣扎的最小工作示例：

$(".card-header").click(function (event) {                                      
    $('html, body').animate({                                                   
        scrollTop: $(".card-header").offset().top                               
    }, 300);                                                                    
});