点击按钮离开页面，新页面加载后启动平滑滚动到指定位置

Question

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

我想单击一个按钮，加载一个新的 url，然后在文档准备好后，我希望它使用动画自动平滑滚动到该页面上的指定位置（因此它滚动平滑并且我可以控制过渡速度）。

我认为这样的事情会奏效。我可能很接近但没有雪茄！

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";  
    });
});

Answer 2

您可以使用 Ariel Flesler 的 jQuery.scrollTo 插件来完成此操作。

查看：Live Demo

---

Page 1:

JS

$('#myButton').click(function(){
    window.location.href = 'http://fiddle.jshell.net/TLeHz/3/show/?scroll=scrollToMe';
}); 

HTML

<input id='myButton' type='button' value='navigate' />

---

Page 2:

JS

$(function(){
    //From: http://stackoverflow.com/a/901144/402706
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    //Scroll based on the value of the Query String param 'scroll'
    var scrollToArea = getParameterByName('scroll');
    if(scrollToArea){
        $.scrollTo('#' + scrollToArea, 800 );        
    }

});

HTML

<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div id='scrollToMe'>scroll to me</div>

CSS

div{
    height:500px;
}

Answer 3

好的，我今天终于解决了这个问题。这有点痛苦，但总的来说，我现在可以正常工作了。我正在使用一个查询字符串（如果您想花时间构建该逻辑，您可以在 URL 中屏蔽它）。这至少是建立和改进的起点。感谢 Brandon Boone 的帮助！

第 1 页 (index.php)

<script>
function GetQueryVariable(query, name) {
    if (query.indexOf("?") == 0) { query = query.substr(1); }
    var pairs = query.split("&");
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split("=");
        if (pair[0] == name) {
            return pair[1];
        }
    }
    return "";
}

var pageMark = GetQueryVariable(location.search, "id");

$(function() {
    $('html, body').animate({
        scrollTop: $('#' + pageMark).offset().top
    }, 2000);
    return false;
});
</script>

<section id="introSection">
    Stuff Here
</section>

<section id="aboutSection">
    Stuff Here
</section>

<section id="workSection">
    <a href="gallery.php">Web Work</a>
</section>

<section id="faqSection">
    Stuff Here
</section>

第 2 页 (gallery.php)

<a href="index.php?id=workSection">GO BACK TO MAIN PAGE</a>