javascript - Showhide div and scroll to it - Stack Overflow

admin管理员组

文章数量:1278910

When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.

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

When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 20, 2017 at 17:19 singe batteur 40022 silver badges1414 bronze badges asked Feb 20, 2017 at 17:06 Pedro Pedro 1,45022 gold badges1616 silver badges4545 bronze badges 4

• 1 can you show html code plz ? – singe batteur Commented Feb 20, 2017 at 17:14
• the user clicks on a form or on a button/link ... ? – singe batteur Commented Feb 20, 2017 at 17:16
• @singebatteur I had updated the question, thank your for taking the time and trying to help – Pedro Commented Feb 20, 2017 at 17:18
• try to use the plete function of toggle() to scroll to it, maybe first time it cant be reached cause not visible yet (because of the duration of the fade in) api.jquery./toggle – singe batteur Commented Feb 20, 2017 at 17:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle/ux0qt5nn/

The issue is that on your first click, the element isn't there yet. Put the scroll function into a callback and you'll be good to go.

$('#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./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>

As explained in other answers, you are trying to scroll an element into view before it's visible and before it's reached its actual height. You can use the following approach to scroll to the amount necessary to display the form and still let the user see the animation. See ments in the code.

$('#showForm').click(function() {
  var formL = $('.formL').show(), // show the form wrapper in order to get its height
      formLHeight = formL.height(),
      formLForm = formL.find('form').hide(); // hide the form itself instead
      
  formL.height(formLHeight);
  formLForm.toggle("slow", function() {
    // optionally, reset the height
    formL.height('auto');
  }); 
 
  // this line is only needed so that the code snippet will not scroll the
  // outer browser window, but only the iframe content. If you're not in an iframe,
  // you can just use the original scrollIntoView() approach instead
  document.documentElement.scrollTop = formL[0].offsetTop;
  // formL.get(0).scrollIntoView();
  
});

#spacer {
  background: red;
  color: #fff;
  height: 80vh;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showForm">show form</button>
<div id="spacer">some long content</div>
<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>

本文标签： javascriptShowhide div and scroll to itStack Overflow