查詢加載頁面 go 立即到 div

Question

我有滾動問題。 它工作正常，但我想在沒有任何 animation 的情況下立即制作它，然后頁面刷新與以前一樣，而不滾動到該位置。

我的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。 但是，我想立即沒有任何 animation 或滾動在什么地方。

我嘗試什么

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

any1 有解決方案嗎？

Answer 1

由於您使用 jQuery，因此您可以使用.animate()和零毫秒（瞬時）的 animation 延遲。

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

為了確保隱藏非常快速的滾動效果，您可以隱藏整個頁面（使用 CSS opacity為零），然后在滾動完成后恢復不透明度。

文檔

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