How to Scroll a bootstrap dropdown-menu programatically

Question

I'm using a bootstrap dropdown-menu to show a big list of years. I need to scroll down the list so the <li> element is shown in the top.

<div id="year-picker" class="dropdown dropdown-lg">
    <a href="#" class="dropdown-toggle left" data-toggle="dropdown"><i></i>Year</a>
    <ul class="dropdown-menu">
        <li th:each="year : ${yearsList}"><a href="#" th:text="${year}"></a></li>
    </ul>
</div>

So the current/default behavior is that the first element appears in the top of the dropdown list, which is 2014. If I want, let's say the fifth element (2010) to be display in the top by default, how can I programmatically make the dropdown scroll until that element is in the top?

Answer 1

Normally the Bootstrap dropdown doesn't scroll so I assume you have changed the CSS to make the .dropdown scroll using overflow-x and setting a specific height.

If so, you can do something like this..

$('#year-picker').on('shown.bs.dropdown', function () {
  var ele = $(this).find("li>a:contains('2009')");
  var posi = ele.offset().top-ele.innerHeight();
  $('.dropdown-menu').animate({
        scrollTop: posi
    }, 1000);
})

http://bootply.com/130603