显示/隐藏div并滚动到它

Question

当用户单击表单时,我试图显示并隐藏表单,并尝试向下滚动以查看表单,我在第一次单击后工作的代码.如果我第一次点击它"显示表单但不向下滚动"第一次点击后工作正常.谁能解释我,我做错了什么.

   $('#showForm').click(function()
               {
                $('.formL').toggle("slow"); 
                $('.formL').get(0).scrollIntoView()
               }); 

HTML:

<div class="formL" style="display: none">
    <form action="">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form> 
</div>

Answer 1

问题是,在该函数中,您尝试滚动到窗体,但它仍然不可见.要解决此问题,请调用函数scrollIntoView()的回调toggle().请参阅此处的示例:https://jsfiddle.net/ux0qt5nn/

Answer 2

问题是,在您第一次单击时,该元素尚未存在.将滚动功能放入回调中你会很高兴.

$('#showForm').click(function(){
  $('.formL').toggle("slow", function() {
    $('.formL').get(0).scrollIntoView();
  }); 
});

$('#showForm').click(function(){
  $('.formL').toggle("slow", function() {
    $('.formL').get(0).scrollIntoView()
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="buttonForm" id="showForm"><span>Click here to see form</span></button>
<br><br><br><br><br><br><br><br><!--Extra lines to show scroll-->

    <div class="formL" style="display: none">
      <form action="">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="submit" value="Submit">
    </form> 
    </div>