点击下拉菜单滚动

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);
  });
});

点击下拉菜单滚动

Dropdown menu scroll on click

html

css

jquery

autoscroll

drop-down-menu