Is there a way to make the page automatically scroll down to the bottom of a dropdown menu when it is clicked? Currently, users have to manually scroll down after opening the menu. I initially tried using anchors for this functionality, but it interfered with the dropdown feature, so I want to keep it as a button.
In my plnkr test, I included an anchor that works correctly. However, I am confused about why the dropdown content appears after the test div.
HTML
<div class="bottom btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"
aria-haspopup="true" aria-expanded="false">
Themes <span class="caret"></span>
</button>
<div class="dropdown-menu">
<ul>
<li>Teal</li>
<li>Gray</li>
<li>Plum</li>
<li>Violet</li>
</ul>
</div>
<br /><br /><br /><br />
<div id="test">test</div>
</div>
CSS
.bottom {
bottom: -890px;
}