jquery – Materialise – 具有巨大内容的可折叠不会滚动到选项卡的顶部

我使用 collapsible component provide by materialize framework.我得到一个错误,不知道如何解决它或找到一个解决方法.如果一个选项卡的内容太大,当我打开选项卡时,它不会滚动到选项卡本身的顶部(它会转到中间).

你可以在这里试试：https://jsfiddle.net/r8314ouq/.
打开第一个选项卡,然后打开第三个选项卡,您将看到它不会滚动到选项卡的开始.

我知道了

但我想看看

这非常烦人,因为用户必须滚动才能看到所有内容.

我按照文档创建了我的可折叠：

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>

我试图捕捉事件并滚动到但它没有用.
有任何想法吗？

$('.collapsible').collapsible({
  accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});

$('.collapsible .collapsible-header').on('click',function(event) {
    var target = $(this);
    setTimeout(function() {
      if( target.length ) {
        event.preventDefault();
        $('html,body').animate({
            scrollTop: target.offset().top
        },500);
      }
    },300);
});