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

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

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

 $(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 using JavaScript?