时间戳

首页 > 解决方案 > 打开时滚动到引导手风琴的顶部

javascript - 打开时滚动到引导手风琴的顶部

问题描述

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

我的问题是，一旦您完成阅读帖子并单击第二个帖子，我就无法在顶部打开第二个帖子，并且标题可见。由于您已经向下滚动阅读第一篇文章，因此您打开了第二篇文章的 2/3。这迫使用户一直滚动到他尚未阅读的帖子的顶部。出于某种原因，我似乎无法工作；任何指导将不胜感激！

更新： 事实证明，由于我使用的是 jQuery 的苗条版本，所以我尝试使用的功能不可用。现在我克服了这个障碍，一切都编译了，但我不能强制页面滚动到正确的位置。

我最接近的解决方案是这个，当打开一个新部分时它会向上滚动到第card-header一个（而我想要card-header点击哪个）。

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

我正在尝试做的在逻辑上等同于这个，但是这个确切的代码根本不滚动（它编译正确，替换$(this)为$(event.target)or$(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>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

始终滚动到打开折叠元素的偏移顶部。如果收盘塌陷高于开口塌陷，则从开口塌陷的偏移顶部减去收盘塌陷的高度。

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>

推荐阅读