如何显示并自动滚动页面底部的隐藏div？

Question

在我需要向下自动显示与效果，如滚动一个隐藏的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脚本。提前感谢。

Answer 1

你可以尝试做这样的事情的伴侣

$(document).ready(function() { 

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

或检查这只是对它进行自定义您的需求。

Answer 2

var objDiv = document.getElementById("your_div"); 
objDiv.scrollTop = objDiv.scrollHeight; 

你可以使用这个片段