Screen scroll to the top when JavaScript message hides

Question

This is my code:

$(document).ready(function() {
  $('#text1')
    .hide()
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .delay(10000)
    .hide(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="text1" style="background-repeat:repeat;left:10px;top:100px; position:fixed">This is a test</div>

It shows a message for 10 seconds,then hides it. At mobile devices, when the message hides, screen scroll automatically to the top of screen. I want to prevent it.

Kind of a hacky way but you could always prevent the scroll action for a certain period of time until the text fades away like you can see here: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily. When the text appears start a timer that disables the scroll option after 9 seconds for 2 seconds — Adin Sijamija, Jul 19 '20 at 18:36
No, it's not my favorite answer. I don't like to limit the users from scrolling on the page. — Amir, Jul 19 '20 at 20:54
My second thought would be that the hide() function removes the entire div from the DOM making the web page smaller and forcing scroll on mobile. Try using the css('visibility','hidden') option instead of the jquery hide option — Adin Sijamija, Jul 20 '20 at 07:53

score 1 · Accepted Answer · answered Jul 20 '20 at 08:29

The function hide() basically sets the visibility of the element display:none which removes the element from the page structure forcing the mobile device to refresh the page that is scroll up. One way you could avoid that is instead of using the hide() function use the css(visibility,option) setting to not display the div but keep it inside the web page structure.

$(document).ready(function() {

  $('#text1')
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .delay(10000)
    .queue(function(next) {
      $(this).css('visibility', 'hidden');
      next();
    });

});

div {
  border-style: solid;
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h4>
  test1
</h4>
<div id="text1" style="background-repeat:repeat;left:10px;top:100px; position:fixed  visibility:visible">Ths is a test</div>
<h4>
  Test2
</h4>

@Amir Glad I could be of any help. Cheers! – Adin Sijamija Jul 20 '20 at 14:46 — Adin Sijamija, Jul 20 '20 at 14:46

score 0 · Answer 2 · answered Jul 19 '20 at 23:49

You're looking for setTimeout

The jQuery methods .delay(), .fadeIn(), .fadeOut() etc. execute the code in the "background" (async) after being run. This means code ran after this won't wait until they have completed.

Using setTimeout will allow you to delay code for a set amount of time in milliseconds.

For example, delay code by 10 seconds:

var delaySeconds = 10;
setTimeout(function(){
    // execute code here
    
}, delaySeconds * 1000);

As for scrolling to the top of the page, take a look at this question: Scroll to the top of the page using JavaScript?

I want to prevent scrolling to the top. Actually user scroll freely at the page and when message box hides, the screen suddenly scroll automatically to the top. It is annoying for user. I want to prevent it from scrolling to the top. As i said , it only happens in mobile devices. — Amir, Jul 20 '20 at 06:55

Screen scroll to the top when JavaScript message hides

2 Answers2