Как показать и прокрутить автоматически скрытый 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; 

вы можете использовать этот фрагмент