Bootstrap 4 - 如何设置它以便菜单总是开始滚动到顶部？

Question

示例： https://codepen.io/jgritten/pen/zpPrdE

如果您打开示例，请展开下拉菜单，向下滚动列表并关闭它。当您重新打开列表时，它仍会滚动到您离开的位置。我该如何设置它总是滚动到顶部打开？

谢谢

<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
   <span class="caret"></span></button>
   <ul class="dropdown-menu" style="max-height: 100px; overflow-y: scroll;">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>

Answer 1

我接受了 BhuwanBhatt 的回答，因为它可以找到我需要的答案。在我的特殊情况下，我的项目是带有 Typescript 组件的 Angular，我在代码中附加了一个点击功能......

document.getElementById('menu_container').scrollTop = 0;

感谢您的帮助。

Answer 2

只需添加以下 jQuery 代码即可解决此问题。

$('.dropdown-menu li a').on('click', function() {
  $('.dropdown-menu').scrollTop(0);
})

$('.dropdown-menu li a').on('click', function() {
  $('.dropdown-menu').scrollTop(0);
})

body,
html {
  font: 13px Verdana;
  margin: 0;
}

.dropdown {
  margin: 20px;
}

.dropdown-menu {
  height: 150px;
  overflow-y: auto
}

.btn.btn-primary,
.dropdown li a {
  font-size: 13px;
}

.dropdown li a {
  padding: 4px 15px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
    <li><a href="#">16</a></li>
    <li><a href="#">17</a></li>
    <li><a href="#">18</a></li>
  </ul>
</div>

我希望这会奏效。