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:

2. <style>
3. #overflowwrap {
4. overflow:hidden !important;
5. }
6. </style>
7. <div style="height:20px">header stuff</div>
8. <div id="overflowwrap">
9. <div id="five" style="display:none;">a lot of content 5</div>
10. <div id="four" style="display:none;">a lot of content 4</div>
11. <div id="three" style="display:none;">a lot of content 3</div>
12. <div id="two" style="display:none;">a lot of content 2</div>
13. <div id="one" style="display:none;">a lot of content 1</div>
14. </div>
15. <div style="height:20px">footer stuff</div>
16. 
    
17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
18. 
    
19. <script>
20. $('#overflowwrap').css('max-height',$(window).height());
21. 
    
22. $("#one").fadeIn(500);
23. setTimeout( function show() {
24. $("#two").fadeIn(500);
25. }, 5000);
26. setTimeout( function show() {
27. $("#three").fadeIn(500);
28. }, 10000);
29. setTimeout( function show() {
30. $("#four").fadeIn(500);
31. }, 15000);
32. setTimeout( function show() {
33. $("#five").fadeIn(500);
34. }, 20000);
35. </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?