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

Question

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:

<style>
#overflowwrap {
   overflow:hidden !important;
}
</style>

<div id="overflowwrap">
   <div id="five" style="display: none;">a lot of content</div>
   <div id="four" style="display: none;">a lot of content</div>
   <div id="three" style="display: none;">a lot of content</div>
   <div id="two" style="display: none;">a lot of content</div>
   <div id="one" style="display: none;">a lot of content</div>
</div>

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

$("#one").fadeIn(500);
setTimeout( function show() {
   $("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
   $("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
   $("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
   $("#five").fadeIn(500);
}, 12000);
</script>

Update: Example fiddle: https://jsfiddle.net/6qj1hbp0/1/

This wouldn't be a problem, if this was the only element on a page and the user couldn't scroll. However, it's integrated on another site (survey software), so the user is able to scroll.

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

Answer 1

Try a different approach.

Instead, of display: none on every element, try opacity: 0;

Then instead of:

setTimeout( function show() {
    $("#two").fadeIn(500);
    }, 5000);

use:

setTimeout( function show() {
    $("#two").addClass('is-visible);
}, 5000);

and add:

.is-visible { opacity: 1 !important; }

within your <style> tags.

Answer 2

you cannot “freeze” scroll, but you can read and change the scroll position, especially because you are using jQuery.

My solution consists in saving the current position of the scroll immediately before the fadeIn instruction then reassign the same value immediately after, with this function:

function fadeInElement(id, time) {
  var currentScroll = $(window).scrollTop();
  $('#' + id).fadeIn(time);
  $(window).scrollTop(currentScroll);
}

Then you may call the same function several times with different ids and duration time, something like this:

fadeInElement('one', 500);

or this:

setTimeout(function() {
    fadeInElement('two', 500);
}, 5000);

You may look a working example on CodePen or on JSFiddle