查询加载页面立即转到 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 代码。

页面加载后滚动到 col-6 div。但是，我想在没有任何动画或滚动的情况下立即出现在什么地方。

我的尝试

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

any1 有解决方案吗？

Answer 1

由于您使用 jQuery，您可以使用 .animate()，动画延迟为零毫秒（瞬时）。

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

为了确保隐藏非常快速的滚动效果，您可以隐藏整个页面（使用 CSS opacity 为零），然后在滚动完成后恢复不透明度。

Documentation

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