查询加载页面立即转到div

Question

我有滚动问题。它工作得很好，但我想在没有任何动画的情况下立即制作它，然后页面刷新到以前的位置，而不滚动到该位置。

我的js代码。

<script type = "text/javascript">
$(function() {
$(window).scrollTop( $("#col-6").offset().top)
});
</script>

例如，我的项目结构。

首先包括css和html

<?php 
include(html/css.php);
some code....
<div class=col-6> 
some code....
</div>
include(footer.php);
?>

所以在之后的页脚php中

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5fbb5e690d.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

我使用js代码。

并且在页面加载后，它滚动到第六列。但是，我想立即没有任何动画或滚动在什么地方。

我尝试

<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).( $("#col-6").offset().top)
});
</script> 

有人能解决这个问题吗？

Answer 1

由于使用jQuery，因此可以使用动画延迟为零毫秒(瞬时(的.animate()。

这就是.animate([property], [delay], [callback])。

为了确保隐藏快速滚动效果，您可以隐藏整个页面(使用CSSopacity为零(，然后在滚动完成后，恢复不透明度。

文档

$(document).ready(function() {
// hide the whole page
$("html").css({opacity:0})

// scroll and unhide the page using the complete callback
$("html").animate({
scrollTop: $("#scroll_to_me").offset().top
}, 0, ()=>$("html").css({opacity:1}))
})

.space {
height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space"></div>
<div id="scroll_to_me">HERE</div>
<div class="space"></div>