`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Question

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain.

I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3b" and fails to scroll to the bottom of the page as intended.

The desired behavior is for it to scroll to the element with the class .comp at the bottom, but it either doesn't scroll all the way or just moves slightly downwards.

If you have any insights on how to make the page scroll to the bottom element successfully the second time after clicking the button, please share them!

$(document).ready(function () {
    $('html, body').delay(1500).animate({
        scrollTop: $('.button').offset().top
    }, 'slow');
   // Further Javascript code here...

});

* {
// CSS styles here...
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <div id="header"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</h1>
    </div>
  <div id="content">
    <div id="graphic"><img src="#" alt="" height="500px" width="300px"></div>
    <div id="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        
      <div class="actionbox" id="a3" style="display:block">
                <h2><strong>Question 3:</strong></h2>
                <div class="butbox">
                    <div class="button buttxt" id="b3"><a href="#/">YES</a></div>
                     <div class="buttonr buttxt" id="b3b"><a href="#/">NO</a></div>
            </div>
     </div>
      <div class="actionbox" id="a4">
        <div id="bar"><div id="percentage"></div></div>
               <h3 id="r1">step1...</h3>
               <h3 id="r2">step2...</h3>
               <h3 id="r3">step3...</h3>
               <h3 id="r4">step4...</h3>

               // More HTML content here...

</div>
    </div>
  </div>
</div>

javascript jquery html css

Answer 1

Answer №1

Instead of relying on fixed time delays for animations, a more effective approach is to sequence them relative to each other by embedding functions within each other. This ensures that the element being scrolled to will be visible at the appropriate moment, avoiding any issues with hidden elements (which may have been causing your problem).

Take a look at this fiddle for reference.

I made some adjustments to the timing, but you'll get the general idea. Here's how the modified code would appear:

$("#b3,#b3b").click(function(){
  $("#a3").fadeOut('fast'),$("#a4").fadeIn('slow');

  $("#bar").width(0);
  $('#r1').show(500);
  $("#bar").delay(150).animate({width: '+=40%'},2000, function() {
    $('#r1').hide(500);
    $('#r2').show(500);
    $('#rb1').show(500);
    $("#bar").animate({width: '+=20%'},2000, function() {
      $('#r2').hide(500);
      $('#r3').show(500);
      $('#rb2').show(500);
      $("#bar").animate({width: '+=20%'},2000, function() {
        $('#r3').hide(500);
        $('#r4').show(500);
        $('#rb3').show(500);
        $("#bar").animate({width: '+=20%'},2000, function() {
          $('#r4').show(500);
          $("#r5").show(); // make sure the element is visible before scrolling to its child
          $('html, body').animate({
            scrollTop: $('.comp').offset().top
          }, 'slow');
        });
      });
    });
  });
});

Answer 2

Instead of relying on fixed time delays for animations, a more effective approach is to sequence them relative to each other by embedding functions within each other. This ensures that the element being scrolled to will be visible at the appropriate moment, avoiding any issues with hidden elements (which may have been causing your problem).

Take a look at this fiddle for reference.

I made some adjustments to the timing, but you'll get the general idea. Here's how the modified code would appear:

$("#b3,#b3b").click(function(){
  $("#a3").fadeOut('fast'),$("#a4").fadeIn('slow');

  $("#bar").width(0);
  $('#r1').show(500);
  $("#bar").delay(150).animate({width: '+=40%'},2000, function() {
    $('#r1').hide(500);
    $('#r2').show(500);
    $('#rb1').show(500);
    $("#bar").animate({width: '+=20%'},2000, function() {
      $('#r2').hide(500);
      $('#r3').show(500);
      $('#rb2').show(500);
      $("#bar").animate({width: '+=20%'},2000, function() {
        $('#r3').hide(500);
        $('#r4').show(500);
        $('#rb3').show(500);
        $("#bar").animate({width: '+=20%'},2000, function() {
          $('#r4').show(500);
          $("#r5").show(); // make sure the element is visible before scrolling to its child
          $('html, body').animate({
            scrollTop: $('.comp').offset().top
          }, 'slow');
        });
      });
    });
  });
});

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Answer №1

Similar questions

Tinymce editor does not display icons as expected

How to Use jQuery Post Method to Submit a Form Without Redirecting

What is the reason behind "Script" being considered the offspring of "Body"?

Incorporating react-intl-tel-input into your project: A step

Is it true that Javascript does not allow for saving or outputting actions?

TypeError: Unable to execute products.map as a function

After the ajax request is finished, make sure to remove the previous .on()

I'm encountering a "confirm" error within the data table. Any suggestions on how to resolve this issue?

How to prevent selection of certain days in an Angular date input

Exploring the power of NodeJS modules through exports referencing

Using Typescript: invoking static functions within a constructor

Converting XML hierarchy into a flat HTML table using XSLT

Alter the app's entire background color in React.js with a button click

Error: Collision detection in Three.js console output

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

How to remove a specific type from a generic type in Typescript without using Exclude<>?

What is the method for replacing browser bundle sources using Rollup?

Issue encountered with AJAX multiple image uploader

Guide to implementing endless ajax scroll pagination using Codeiginiter

Is there a comparable solution like Fabric in Javascript or Node.js?