使用切換打開div時自動向下滾動頁面

Question

當我點擊按鈕時，我有一個隱藏的div，它通過一個slidetoggle功能打開/關閉（見下文）。 這很好用。 但是，當打開/關閉div時，我希望頁面的底部向下/向上自動滾動。 我的頁面底部必須與打開的div的底部對齊+ div下方的一些額外邊距，以便我的頁面的訪問者可以看到打開的div。 我怎樣才能做到這一點？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#button_toggle_XRT").click(function() {
        $( "#XRT_overview").slideToggle(1000);
});
});
</script>

Answer 1

嘗試將div包裝在另一個div中。 你將不得不使用外部div做一些額外的CSS，但這應該控制一切。 現在，您將slideToggle()應用於內部div，而不是外部div。 我已經制作了一個jsBin來幫忙：

http://jsbin.com/pacecibugu/edit?html,output

它看起來像這樣：

<div style="height:200px;background-color:gray;" id="clickableDiv">

    <div style="height:190px;background-color:lightgray;" id="toggledDiv">
      <p>Here's my div</p>
    </div>

</div>

<script>

    $(document).ready(function() {

      $("#clickableDiv").click(function() {
         $("#toggledDiv").toggle();
      });

    });

</script>