默认情况下如何将滚动设置为下拉列表的顶部答案

【问题标题】：How to by default set the scroll to top of the dropdown默认情况下如何将滚动设置为下拉列表的顶部
【发布时间】：2021-10-14 22:58:46
【问题描述】：

我需要将下拉菜单的滚动设置为始终单击下拉菜单的顶部。

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" 
     id="button1">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>
  </div>
<script>
  $(document).ready(function(){
    $("#button1").click(function(){
      $('#button1').scrollTop(0);
});
  });
</script>

我的小提琴：https://codepen.io/developer52/pen/GRmzEmB

我正在尝试使用 jquery，因为它无法使用 CSS。

任何帮助将不胜感激。

【问题讨论】：

您为什么要尝试将scrollTop 应用于按钮？ UL 是实际溢出的元素。
我用 UL 更新了小提琴。还是一样。如果我用底部的滚动条关闭下拉菜单并重新打开它。滚动仅设置在该位置。每当单击下拉菜单时，我希望它位于顶部。

标签： html jquery css bootstrap-4

【解决方案1】：

下面的 jquery 应该可以工作。我们将捕获下拉列表打开时触发的事件shown.bs.dropdown，然后滚动到下拉列表末尾。

$(document).ready(function() {
  $('html,body').on('shown.bs.dropdown', function(obj) {
    $('#drop').animate({scrollTop: $('#drop')[0].scrollHeight}, 1000)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="button1">
             Dropdown Example
             <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" style="max-height: 100px; overflow-y: scroll;" id="drop">
            <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>
    </div>

【讨论】：