点击下拉菜单滚动

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