Toggle the visibility of a div element and smoothly scroll to it on the page

Question

Toggle the visibility of a div element and smoothly scroll to it on the page

Upon clicking the form, my goal is to show or hide it and scroll down to view the form. The current code I have in place seems to work after the first click. However, on the initial click, it shows the form but fails to scroll down. Any insights on what I might be 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

Answer 1

Answer №1

The issue arises when attempting to scroll to the form before it becomes visible in that particular function. A solution would be to invoke scrollIntoView() within the callback of the toggle() function. Check out this example for reference: https://jsfiddle.net/ux0qt5nn/

Answer 2

The issue arises when attempting to scroll to the form before it becomes visible in that particular function. A solution would be to invoke scrollIntoView() within the callback of the toggle() function. Check out this example for reference: https://jsfiddle.net/ux0qt5nn/

Answer 3

Answer №2

It seems that the element is not present when you first click. Try placing the scroll function inside a callback to ensure it works correctly.

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

Answer 4

It seems that the element is not present when you first click. Try placing the scroll function inside a callback to ensure it works correctly.

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

Answer 5

Answer №3

As mentioned in previous responses, the goal is to scroll an element into view before it's fully visible or reached its actual height. To achieve this, you can implement the following method that scrolls just enough to display the form while also allowing the user to witness the animation. Check out the code comments for guidance.

$('#showForm').click(function() {
  var formL = $('.formL').show(), // reveal the form wrapper to calculate its height
      formLHeight = formL.height(),
      formLForm = formL.find('form').hide(); // hide the actual form content
      
  formL.height(formLHeight);
  formLForm.toggle("slow", function() {
    // if needed, reset the height once the animation is complete
    formL.height('auto');
  }); 
  
  // The following line ensures that only the iframe content is scrolled, not the entire window. If you're not working within an iframe, simply use the original scrollIntoView() method instead
  document.documentElement.scrollTop = formL[0].offsetTop;
  
});

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

<script src="https://ajax.googleapis.com/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>

Answer 6

As mentioned in previous responses, the goal is to scroll an element into view before it's fully visible or reached its actual height. To achieve this, you can implement the following method that scrolls just enough to display the form while also allowing the user to witness the animation. Check out the code comments for guidance.

$('#showForm').click(function() {
  var formL = $('.formL').show(), // reveal the form wrapper to calculate its height
      formLHeight = formL.height(),
      formLForm = formL.find('form').hide(); // hide the actual form content
      
  formL.height(formLHeight);
  formLForm.toggle("slow", function() {
    // if needed, reset the height once the animation is complete
    formL.height('auto');
  }); 
  
  // The following line ensures that only the iframe content is scrolled, not the entire window. If you're not working within an iframe, simply use the original scrollIntoView() method instead
  document.documentElement.scrollTop = formL[0].offsetTop;
  
});

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

<script src="https://ajax.googleapis.com/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>

Toggle the visibility of a div element and smoothly scroll to it on the page

Answer №1

Answer №2

Answer №3

Similar questions

create new Exception( "Invalid syntax, expression not recognized: " msg );

Textarea malfunctions if it includes HTML code

How can I navigate and click on a drop-down menu link in Python using Selenium and CSS selectors?

Integrating Next.js with a authentication provider and a Redux provider

Switching from Vue's Options API to Composition API is like transforming your code from

Node.js project that was once functional is now encountering issues with the error message: "Error: Route.post() requires a callback function but received [object Undefined]."

What does the HTML and JS code look like when using Next.Js?

unable to display items in the navigation bar according to the requirements

Is it possible to link a JavaScript object to a dropdown Select Option?

Issues with CSS Modules not applying styles in next.js 13 version

"Efficiently fetch data with an Express GET request without the

Is it possible for jQuery to fail within an object method?

What are the signs that an element was visible on screen prior to navigation?

Error: Callstack Overflow encountered in TypeScript application

proper method for sending parameter in ajax request

Click on the react item to view more information

Utilizing square brackets in Node.js for working with URLs

The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

Angular can help you easily convert numbers into a money format

"An issue arises where the bokeh plot fails to render when generating a