当div打开时，自动向下滚动页面

Question

当我点击一个按钮时，我有一个隐藏的div可以通过滑动功能打开/关闭（见下文）。这很好。但是，我希望当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>