Animate scrollTop not working

Question

I have a function when on click it a div is being shown and that works fine. I have also tried to add animate scrollTop to the function where I would like to add div is shown & scroll to it. But unfortunately that's not working. I am not getting any errors in the console.

Here my code below:-

  $(document).ready(function () { $('#video-edit-button').click(function() { $('#video-edit-form').show(); $('html,body').animate({ scrollTop: $("#video-edit-form").offset().top }); }); });

  <button class="btn btn-default button-edit" id="video-edit-button">Edit info</button> <div class="panel panel-default video-edit-form" id="video-edit-form"> .... </div>

Answer 1

That's what you're trying to implement? https://plnkr.co/edit/0jVELqSpoUr4xxcarE0S?p=preview

Here is the working snippet:

 $(document).ready(function () { $('#video-edit-button').click(function() { $('#video-edit-form').fadeIn(1000); $("html, body").animate({ scrollTop: $('#video-edit-form').offset().top }, 1000); }); });

 .fakeContent { margin: 10px; width: 300px; height: 300px; } .video-edit-form { display: none; width: 100vw; background-color: pink; height: 300px; }

 <head> <link rel="stylesheet" href="style.css"> <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script src="script.js"></script> </head> <body> <div class="fakeContent", style="background-color: black;"> </div> <div class="panel panel-default video-edit-form" id="video-edit-form"> Video Edit Form Here </div> <div class="fakeContent" style="background-color: green;"> </div> <div class="fakeContent" style="background-color: red;"> </div> <div class="fakeContent" style="background-color: blue;"> </div> <div class="fakeContent" style="background-color: yellow;"> </div> <button class="btn btn-default button-edit" id="video-edit-button">Edit info</button> </body>

Animate scrollTop not working

Question

1 answers

solution1
1 2016-11-18 15:32:24

Here is the working snippet:

Cheers

Animate scrollTop not working

Question

1 answers

solution1 1 2016-11-18 15:32:24

Here is the working snippet:

Cheers

solution1
1 2016-11-18 15:32:24