CODEWITHSUNDEEP
javascripthtmljquery
Amir
Amir

Reputation: 4111

Screen scroll to the top when JavaScript message hides

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.

Upvotes: 0

Views: 81

Answers (2)

Adin Sijamija
Adin Sijamija

Reputation: 734

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>

Upvotes: 1

Rylee
Rylee

Reputation: 1656

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?

Upvotes: 0

Related Questions