Prevent jQuery from jumping to the bottom (when using fadeIn)

Prevent jQuery from jumping to the bottom (when using fadeIn)

I've created some divs fading in with jQuery, I have a problem if the user scrolls a bit down though. If you are not at the top of the page, it will always jump to the bottom when a new div fades in.

Here's my code:

  1. <style>
  2. #overflowwrap {
  3. overflow:hidden !important;
  4. }
  5. </style>
  6. <div style="height:20px">header stuff</div>
  7. <div id="overflowwrap">
  8. <div id="five" style="display:none;">a lot of content 5</div>
  9. <div id="four" style="display:none;">a lot of content 4</div>
  10. <div id="three" style="display:none;">a lot of content 3</div>
  11. <div id="two" style="display:none;">a lot of content 2</div>
  12. <div id="one" style="display:none;">a lot of content 1</div>
  13. </div>
  14. <div style="height:20px">footer stuff</div>

  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  16. <script>
  17. $('#overflowwrap').css('max-height',$(window).height());

  18. $("#one").fadeIn(500);
  19. setTimeout( function show() {
  20. $("#two").fadeIn(500);
  21. }, 5000);
  22. setTimeout( function show() {
  23. $("#three").fadeIn(500);
  24. }, 10000);
  25. setTimeout( function show() {
  26. $("#four").fadeIn(500);
  27. }, 15000);
  28. setTimeout( function show() {
  29. $("#five").fadeIn(500);
  30. }, 20000);
  31. </script>

This wouldn't be a problem, if the #overflowwrap div was the only element on a page and the user couldn't scroll. However, it's integrated on another site (survey software with "header/footer stuff"), so the user is able to scroll.

Is there anything I can do to prevent the site from jumping to the bottom?