Javascript 如何以编程方式滚动引导下拉菜单

我使用一个引导下拉菜单来显示一个大的年份列表。 我需要向下滚动列表，以便顶部显示

元素

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

---

因此，当前/默认行为是，第一个元素出现在下拉列表的顶部，即2014。如果我想，假设第五个元素（2010）默认显示在顶部，如何以编程方式使下拉列表滚动，直到该元素位于顶部？

通常引导下拉列表不会滚动，因此我假设您已更改CSS以使下拉列表滚动。使用

overflow-x

并设置特定高度

如果是这样，你可以这样做

$('#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);
})

---

您可以使用ScrollTop移动（滚动）到第五个（2010）元素的偏移量。这甚至会在打开下拉列表时触发，您可以监听并检测它是否是（“：visible”）我想要的答案。唯一的问题是元素的偏移量是可变的，并导致奇怪的行为（您可以在演示中看到）。但是因为我只需要查找n元素，所以我将‘posi’计算为ele.innerHeight（）*n。