How to make a webpage scroll animation of an element using slidedown ()?

Question

I have a <div> at the bottom of my webpage that is hidden when the page loads, there is a link in the visible footer that causes it to slide down to display using the jQuery slidedown() function. There is also a link to hide it again.

Link to open:

 <a href="javascript:void(0)" class="cookies_open">Open</a> 

An element with a link to hide inside:

 <div id="hiddenbit"> <a href="javascript:void(0)" class="cookies_close">hide</a> </div> 

JS:

 $(document).ready(function(){ $(".cookies_close").click(function(){ $("#hiddenbit").slideUp(1000); }); $(".cookies_open").click(function(){ $("#hiddenbit").slideDown(1000); }); }); 

Now it all works. BUT, because the item is at the bottom of the page, I need the browser to scroll down to display it when it opens. At the moment, the scroll bar is expanding, but the page does not scroll down so that the user cannot see it.

How can i do this?

Answer 1

You can specify the id element as a href hyperlink to display it.

You also need to get the element out of the normal flow so that the scroll size does not change - for which I applied position:absolute .

---

 $(document).ready(function () { $(".cookies_close").click(function () { $("#hiddenbit").slideUp(1000); }); $(".cookies_open").click(function () { $("#hiddenbit").slideDown(1000); }); }); 

 * { /* prevent browser defaults*/ margin:0px !important; padding:0px !important; } html, body, #wrapper { height:100%; } header { height:15%; background: #0080FF; } #content { position:relative; text-align:center; background: #58D3F7; height: 100%; } #hiddenbit{ display:none; position:absolute; bottom:0; width:100%; height:100px; background:hotpink; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='wrapper'> <header></header> <div id="content"> <a href="#hiddenbit" class="cookies_open">Open</a> <div id="hiddenbit"> <a href="javascript:void(0)" class="cookies_close">hide</a> </div> </div> <div> 

Answer 2

In your click events add this:

 //xpos : it will be 0 for you //ypos: you give some value, it will scrolldown with that pixel window.scrollTo(xpos,ypos);