Leave page on button click, after new page loads initiate a smooth scroll to a specified location

Question

I've been working on this scenario for a couple hours and I'm finally at a loss. I'm pretty sure I've seen this done before, but it may not be possible and I'd hate to waste more time if it's not even possible.

I would like to click a button, load a new url, then after the document is ready I would like it to automatically smooth scroll to a specified location on that page using animate (so it scrolls smooth and I can control the transition speed).

I thought something like this would work. I might be close but no cigar!

JS:

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

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

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

I have also tried...

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

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

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

HTML:

below is on gallery.php

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

below is on 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

Okay, I finally solved this today. It was a bit of a pain, but overall I now have it working. I'm using a Query String (which you can mask in the URL if you want to take the time to build that logic). This at least is a starting point to build off and improve. Thank you Brandon Boone for the assistance!

Page 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>

Page 2 (gallery.php)

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

Answer 2

Switch them. .click() handlers should go into the ready function.

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

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

Answer 3

You can use Ariel Flesler's jQuery.scrollTo plugin to accomplish this.

Check it out: 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;
}