Question

这是我的代码：

$(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>

它会显示一条消息10秒钟，然后将其隐藏。在移动设备上，当消息隐藏时，屏幕会自动滚动到屏幕顶部。我想阻止它。

Answer 1

函数hide()基本上设置元素display:none的可见性，该元素从页面结构中删除，从而迫使移动设备刷新向上滚动的页面。一种可以避免这种情况的方法是，不使用hide()函数，而使用css(visibility,option)设置不显示div，而是将其保留在网页结构中。

$(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>

Answer 2

您正在寻找setTimeout

jQuery方法.delay(), .fadeIn(), .fadeOut()等在运行后在“后台”（异步）中执行代码。这意味着代码将在此之后运行，直到它们完成为止。

使用setTimeout将使代码延迟设置的时间（以毫秒为单位）。

例如，将代码延迟10秒：

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

关于滚动到页面顶部，请看以下问题：Scroll to the top of the page using JavaScript?

JavaScript消息隐藏时，屏幕滚动到顶部

2 个答案: