时间戳

首页 > 解决方案 > 默认情况下如何将滚动设置为下拉列表的顶部

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

问题描述

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

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

任何帮助将非常感激。

标签： htmljquerycssbootstrap-4

解决方案

下面的 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>

推荐阅读