Abin Jacob Abin Jacob - 28 days ago 13
HTML Question

how to show and scroll automatically a hidden div at bottom of the page?

On a click on the image I have to show a hidden div with effects such as scroll down automatically to the bottom

my code looks like:

<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>


My script looks like:

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

});
});
</script>


By using this script i can show the hidden div but it not scrolling down automatically.Now my need is to make it possible scroll down automatically when clicked on the image dugh1.png to show hidden div. what should I have to done for making that possible. I am very new to java script. Thanking in advance.

Answer

you could try doing something like this mate

$(document).ready(function() {

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

or check this just customize it to your needs.