2

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>

3 Answers3

0

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";  
    });
});
Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
0

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;
}
Brandon Boone
  • 16,281
  • 4
  • 73
  • 100
  • Thanks for responding Brandon, appreciate it. I actually have scrollto working when the button resides on the same page as the container.... but what I'm trying to do is click a button on gallery.php, which takes you to a different page (index.php), after index.php loads the document it then initiates the scrollto on index.php and scrolls from the top to #workSection. The button doesn't reside on the same page, hope that makes sense. –  Feb 21 '14 at 06:41
  • Isn't what you've described the exact functionality I'm demonstrating? Perhaps I'm misunderstanding you. Your `gallery.php` with a button is my `Page 1` with a button (`navigate`). Your `index.php` which is supposed to load and initiate a scrollto from the top to `#workSection` is my `Page 2` which initiates a scrollto from the top to `#scrollToMe`. Clicking on my `Live Demo` link (which is also `Page 1`) and clicking on the `navigate` button shows how these pages work together. You should be able to use this exact methodology to accomplish what your after. Let me know what I've missed. – Brandon Boone Feb 21 '14 at 12:57
  • Ah, no, you're very close... but I only want the scrollto on page 2 (index.php) to initiate if the button on page 1 (gallery.php) has been clicked. In your example the scrollto will initiate on the page every time the page loads, whether the button was clicked or not. To give some context... The index page is a very long page with a link to the gallery about midway down the page. when you go to gallery and click the back button the default action takes you back to the index page, but to the top, then the user has to manually scroll all the way back down to the gallery section they just left. –  Feb 21 '14 at 20:33
  • I would like it to take you back to the index and then scroll to the midway section automatically after the page loads (which is why I tried a document ready [as well as an onLoad] inside the click function, but that logic isn't correct). Also, I want to avoid hashtags in the URL, I should note that. It's been a fun challenge. –  Feb 21 '14 at 20:35
  • Likewise, it is an interesting problem. I think I get what you're saying. Without using hashtags in the URL, but still using the query string, I think I've accomplished what you're after. Let me know if this works for you. – Brandon Boone Feb 22 '14 at 02:13
0

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>