单击它时,我有一个功能正在显示div,并且工作正常。我还尝试过将动画scrollTop添加到要添加div的函数中并滚动至该函数。但不幸的是,这没有用。我在控制台中没有任何错误。

这是我的代码如下:



 $(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>

最佳答案

那就是您要实现的?
https://plnkr.co/edit/0jVELqSpoUr4xxcarE0S?p=preview

这是工作片段:



$(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>





干杯

10-05 20:49
查看更多