使用切换打开 div 时自动向下滚动页面答案

【问题标题】：automatically scroll down page when div opens with toggle使用切换打开 div 时自动向下滚动页面
【发布时间】：2017-02-19 08:40:34
【问题描述】：

当我点击一个按钮时，我有一个隐藏的 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>

【问题讨论】：

标签： javascript toggle

【解决方案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>

【讨论】：