如何顯示並自動滾動頁面底部的隱藏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; 

你可以使用這個片段