I use the [collapsible component provide by materialize framework](http://materializecss.com/collapsible.html). I get one bug and have no idea how to solve it or find a workaround. If the content of one tab is too huge, when I open the tab it does not scroll to the top of the tab itself (it goes to the middle).

You can try it here : <https://jsfiddle.net/r8314ouq/>.
Open the first tab then open the third tab you'll see that it doesn't scroll to the beggining of the tab.

I see 
[![enter image description here](https://i.stack.imgur.com/zGR9y.png)](https://i.stack.imgur.com/zGR9y.png)
But I would like to see
[![enter image description here](https://i.stack.imgur.com/um2k2.png)](https://i.stack.imgur.com/um2k2.png)
It's very annoying because the user has to scroll to see all the content.

I followed the documentation to create my collapsible :

```
<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>

```

I tried to catch the event and do a scroll to but it didn't work.
Any ideas?