jquery - 单击按钮时保留页面，新页面加载后启动平滑滚动到指定位置

Question

我已经在这个场景上研究了几个小时，但我终于不知所措了。我很确定我以前见过这样做，但这可能是不可能的，如果不可能的话，我不想浪费更多时间。

我想单击一个按钮，加载一个新的网址，然后在文档准备好后，我希望它使用动画自动平滑滚动到该页面上的指定位置(这样它滚动平滑，我可以控制过渡速度)。

我认为这样的事情会起作用。我可能很接近，但没有雪茄!

JS:

$("#backToWorkBtn").click(function() {

    window.location.href = "index.php";

    $(window).on("load", function () {
        $('html,body').animate({
            scrollTop: $("#workSection").offset().top
        }, 800);
    });
});

我也尝试过...

$("#backToWorkBtn").click(function() {

    window.location.href = "index.php";

    $(document).ready(function() {
        $('html,body').animate({
            scrollTop: $("#workSection").offset().top
        }, 800);
    });
});

HTML:

下面是 gallery.php

<a id="backToWorkBtn">BACK TO MY WORK</a>

下面是index.php

<section id="introSection">
    Intro Area
</section>

<section id="aboutSection">
    About Me Area
</section>

<section id="workSection">
    <a href="gallery.php">Web Design</a>
    <a href="gallery.php">Print Design</a>
    etc etc etc..
</section>

Answer 1

切换它们。 .click() 处理程序应进入就绪函数。

$(document).ready(function() {
    $('html,body').animate({
        scrollTop: $("#workSection").offset().top
    }, 800);

    $("#backToWorkBtn").click(function() {
        window.location.href = "index.php";  
    });
});