CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leff
Leff

Reputation: 1286

Animate scrollTop not working

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>

Upvotes: 0

Views: 2482

Answers (1)

P.S.
P.S.

Reputation: 16384

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>

Cheers

Upvotes: 1

Related Questions