點擊下拉菜單滾動

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