单击时下拉菜单滚动

Question

我的页面底部有一个下拉菜单。当用户单击它时，我希望页面自动向下滚动到菜单内容的底部。现在，用户必须在打开菜单时手动向下滚动页面。最初，我尝试为此使用锚点，但这会破坏下拉功能，因此我想将其保留为按钮。

我在plnkr 中添加了一个测试锚，它按预期工作。我也不明白为什么测试后会出现下拉内容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;
}

Answer 1

试试这个 JS：

$(document).ready(function() {
  $('.dropdown-toggle').dropdown();

  $('.dropdown-toggle').on('click',function(){
    var height = $(document).height();
    $(window).scrollTop(height);
  });
});