CODEWITHSUNDEEP
javascriptjquery
user2455426
user2455426

Reputation: 53

How to make webpage scroll to element being animated using slidedown()?

I have a <div> at the bottom of my webpage which is hidden on page load, there is a link in the visible footer which makes it slide down to appear, 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>

Element with 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, all of the above works. BUT, because the element is at the bottom of the page, I need the browser to scroll down to bring it into view when it is opened. At the moment, the scroll bar expands but the page doesn't scroll down so the user can't see it.

How can i do it?

Upvotes: 4

Views: 354

Answers (2)

T J
T J

Reputation: 43166

You can specify the id of the element as the href of the hyperlink to bring it to view.

You also need to take the element out of normal flow so that the scroll size doesn't change - for which i've 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>

Upvotes: 1

Gyandeep
Gyandeep

Reputation: 13568

On 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);

Upvotes: 0

Related Questions