How to by default set the scroll to top of the dropdown

user_4221516 0
Viewed 112

I need to set the scroll of the dropdown to the top always on-click of dropdown.

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

I am trying using jquery because it didn't work using CSS.

Any help would be much appreciated.

bootstrap-4 css html jquery
1 Answers

The below jquery should work. We will capture the event shown.bs.dropdown which is triggered when dropdown is opened and then scroll to the drop down list end.

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

user_12485050
Related