Prevent jQuery jump to the bottom (when using fadeIn)

Question

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

Here is 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: Sample script: https://jsfiddle.net/6qj1hbp0/1/

This would not be a problem if it was the only element on the page and the user could not scroll. However, it is integrated into another site (survey software), so the user can scroll.

Is there anything I can do to keep the site from jumping down?

Answer 1

Thanks for the answers, they did not work for my purpose.

However, I have a solution from another forum that does not require a change in functionality. This seems to work:

 $('#overflowwrap').css('max-height', $(window).height()); fadeIn("#one", 0) fadeIn("#two", 5000) fadeIn("#three", 10000) fadeIn("#four", 15000) fadeIn("#five", 20000) function cs() { console.log(document.scrollingElement.scrollTop) } document.scrollingElement.scrollTop = 16 function fadeIn(el, when) { setTimeout(function show() { var t=document.scrollingElement.scrollTop $(el).fadeIn(500); document.scrollingElement.scrollTop = t }, when); } 

Here is a working JSFiddle example: https://jsfiddle.net/6qj1hbp0/4/

Answer 2

Try a different approach.

Instead of display: none for each element, try opacity: 0;

Then instead of:

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

using:

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

and add:

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

in the <style> tags.

Answer 3

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

My solution is to keep the current scroll position immediately before the fadeIn statement, then reassign the same value immediately after this function:

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

Then you can call the same function several times with different identifiers and duration, for example:

 fadeInElement('one', 500); 

or that:

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

You can look at a working example in CodePen or on JSFiddle

Answer 4

• Do you need to limit overflow to hidden?

  You can simply set overflow: auto and the browser will automatically make sure scrollTop stays the same after it disappears. The user of the item looks after the scroll remains at the same offset. If the user has not scrolled, he will show the last faded element at the top

  Here's jsfiddle: https://jsfiddle.net/sm2qaa3c/2/

  

• After reading your comment again, it seems like you always want to display the last faded div at the top. In this case, you want to use the reset scrollTop function of 0. You want to do this on overflowwrap not window , since this will happen with scroll overflow.

   ['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => { setTimeout(() => { $(id).fadeIn(500); $('#overflowwrap').scrollTop(0); }, idx * 5000); }); 

  

See jsfiddle: https://jsfiddle.net/sm2qaa3c/3/

Answer 5

In short, the simplest thing you can do is hide the previous div every time you show a new one.

https://jsfiddle.net/6qj1hbp0/2/

 $("#one").fadeIn(500); setTimeout( function() { $("#one").hide(); $("#two").fadeIn(500); }, 3000); setTimeout( function() { $("#two").hide(); $("#three").fadeIn(500); }, 6000); setTimeout( function() { $("#three").hide(); $("#four").fadeIn(500); }, 9000); setTimeout( function() { $("#four").hide(); $("#five").fadeIn(500); }, 12000); 

If you want to disappear from one window to another (which creates a much smoother effect), you will need to do something else - especially:

• put the boxes in order, from top to bottom, #one on #five (you should do this anyway - it just makes sense).
• set the absolute value for each of the fields
• set some other styles (see fiddle below)
• use a special class when the field disappears in

https://jsfiddle.net/6qj1hbp0/3/

Answer 6

It's simple. Just change the order of your div to the order you want to show, instead of "five, four, three, two, one." There is no intention in your browser to bring you to the point; it is simply trying to keep the viewpoint fixed in the current hash navigation. Since your fading div is always higher, your scrollTop will just jump to the bottom.

Another solution - if you do not want to reorder - is to delete all div id and create another way to recognize them, something like "data-id".

PS: look for the identifier after that!