Question

我有一个功能，当点击它时，div正在显示，并且工作正常。我还尝试将动画scrollTop添加到我要添加div的功能中，并显示＆amp;滚动到它。但不幸的是，这不起作用。我在控制台中没有收到任何错误。

这里我的代码如下： -

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

您尝试实施的是什么？ https://plnkr.co/edit/0jVELqSpoUr4xxcarE0S?p=preview

以下是工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Animate scrollTop无法正常工作

1 个答案:

以下是工作片段：

干杯