How to automatically scroll when a div expands at the bottom of the page?

Question

Recently, I have come to a standstill. I am trying to expand the footer (#footernotes) and it works, it is basically a div behind the body (done with z-index), and when you click on the button, it moves down. The scroll bar goes with it, which means the page is now longer.

But I'm trying to do a viewport move with an extended div. What happens now, when I click the (.secret) button, a div (#footernotes) appears, but it still leaves the viewport if you are not viewing the longer page manually.

So, how to do it, how to make the viewport automatically scroll down after you have expanded the page? In other words, how to make visibility at the bottom of the page.

Here is my code:

<script> $(document).ready(function(){ $('.secret').click(function(){ $("#footernotes").animate({top: "100px"}, 1000); return false; }); }); </script> <div id="footer"> <a href="" class="secret" ><div id="buttontest" style="width:50px; height:50px; background-color:green;"></div></a> <div id="footernotes"> </div> </div> <!-- end #footer --> 

And CSS for #footernotes

 #footernotes { background-color: red; width: 100%; position: relative; top: -80px; height: 150px; z-index: -400; } 

EDIT:. After typing the question, I will find out the answer, you should use scrollTop. I added the line code in the following example:

 <script> $(document).ready(function(){ $('.secret').click(function(){ $("#footernotes").animate({top: "100px"}, 1000); $('body,html').animate({scrollTop: "210px"},1000); return false; }); }); </script> 

You can still answer this if you think there is a better way, I just thought I would leave this question in case other people have the same question.

Answer 1

 document.getElementById('divID').scrollIntoView(); 

try and see if this task is completed.

Answer 2

This can be done using the Jquery.focus () method. just need to add

$ (divname / .class / # id) .focus ();

and it will be done.