javascript - 如何在页面底部自动显示和滚动隐藏的div？

单击图像后，我必须显示一个具有效果的隐藏div，例如自动向下滚动到底部

我的代码如下：

    $(document).ready(function() {
      $('#test').click(function() {
        $('.contact-form').toggle("100");

      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="contact" status="closed">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="contact-nav"></div>
        <div class="contact-form-trigger open" id="test">
          <img src="<?php echo base_url('assets/images/dugh1.png')?>" class="doug img-resfponsive hidden-xs" alt="Doug the man!">
        </div>
      </div>
    </div>
  </div>
  <div class="color-div"></div>
  <div class="contact-form " style="display: none;">

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <div class="address">
            <div class="address-div">
              <h3>Address</h3>
              <h5><?php echo $company[1]->content; ?>
                            </h5>
              <h5>Phone: <?php echo $company[2]->content; ?></h5>
              <a href="#">
                <?php echo $company[3]->content; ?></a>
            </div>
            <div class="social-icons">
              <h4>follow us</h4>
              <ul class="list-inline">
                <li><a class="social-icon" href="<?php echo $company[7]->content; ?>"><i class="fa fa-facebook"></i></a>
                </li>
                <li><a class="social-icon" href="<?php echo $company[8]->content; ?>"><i class="fa fa-twitter"></i></a>
                </li>
                <li><a class="social-icon" href="<?php echo $company[9]->content; ?>"><i class="fa fa-linkedin"></i></a>
                </li>
                <li><a class="social-icon" href="<?php echo $company[10]->content; ?>"><i class="fa fa-dribbble"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

通过使用此脚本，我可以显示隐藏的div，但它不会自动向下滚动。现在，我需要使它成为可能，当单击图像dugh1.png来显示隐藏的div时可以自动向下滚动。我要怎么做才能做到这一点。我是Java脚本的新手。在此先感谢。

最佳答案

你可以尝试做这样的伴侣

$(document).ready(function() {

      $('#test').click(function() {
        $('.contact-form').toggle("100");
        $('html, body').animate({
           scrollTop: $('footer').offset().top
        }, 'slow');
      });
    });

或选中此按钮即可根据您的需要对其进行自定义。