Link to a Waypoint from a static page

Question

I have several slides in the parallax site, but I have a link off to one static page. From that static page, how do I link back to a particular slide and keep the scrolling effect?

I'm using Stellar.js as my parallax script.

My navigation on the parallax page:

<nav class="navigation">
<ul>
  <li data-slide="1" >
    <div class="item"><a href="#">Slide 1</a></div>
  </li>
  <li data-slide="2">
    <div class="item"><a href="#">Slide 2</a></div>
  </li>
  <li >
    <div class="item"><a href="test.html">Slide 3</a></div>
  </li>
  <li data-slide="4">
    <div class="item"><a href="#">Slide 4</a></div>
  </li>
</ul>

and each slide is:

<div class="slide" id="slide4" data-slide="4"> content </div>

I tried putting a named anchor just above the slide:

<a id="section4"></a>
<div class="slide" id="slide4" data-slide="4"> content </div>

but, it only jumps to that section, and doesn't do the nice scroll down to that section.

What can I do on my Static page to be able to go to that section with the scrolling effect?

Maybe try add something on the querystring? For e.g. `parallaxpage.html?jsslide=4`. Then on the parallax, you read the querystring with js, do a `$('#navi').children('li[data-slide='+jsslide+']').children('a').click();` (which fakes the user clicking on the navi and then, activating the scrolling). If you like this approach, I'll post a more detailed answer. — RaphaelDDL, Apr 26 '13 at 17:21
yes, please. Looks like this is the way to go. I'll try your sample first, but if you could also post a detailed answer, that will be appreciated. THANKS! — Keoki, Apr 26 '13 at 18:17
You may also be able to integrate history.js to push states. That makes it pretty easy to handle what you're describing — Kai Qing, Apr 26 '13 at 19:39
Tried the sample code, but it doesn't scroll down to the section. I've also updated my html code since I needed to make the navigation sticky. — Keoki, Apr 26 '13 at 19:40
History.js is the plugin that watches for the # at url. So you can use `parallaxpage.html#slide-4` and it will be kept in the browser history. Clicking in another section would update the # and when you press back, it will go back to slide-4. But since Stellar seems to already do some treatment by preventing default anchor behavior, the querystring option seems better. — RaphaelDDL, Apr 26 '13 at 20:12

score 1 · Answer 1 · edited May 23 '17 at 11:57

Let's try the querystring approach.

On the page with the stellar, you will add this function somewhere inside a script tag but outside the jQuery's $(document).ready() (Script from here):

function getParameterByName(name){
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.search);
    if(results == null)
        return "";
    else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
}

And on your $(document).ready() this script (better if after everything, specially stellar):

var slideToGo = getParameterByName('slide');
slideToGo = parseInt(slideToGo); //try make it a number
if($.type(slideToGo) == 'number'){ //make sure is a number
    var delay = setTimeout(function(){
        $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click();
    },500);
}

So every time your page with parallax is accessed, this script will look for the ?slide= in the URL's querystring. If finds it (and is a string and non empty), will try find the LI which has the data-slide equal to the number in the ?slide= and click on it's anchor.

I think this may work. I added a little setTimeout to give some time for stellar to render. I couldn't find in its doc if it had a onComplete event or something like. Would be alot better but since seems don't have, let's try this way.

And of course, on the static page, the link would be pagewithstellar.html?slide=NN where NN is the number of the data-slide you want to go back to.

Update:

If you really want to use hash (for example: parallaxpage.html#slide-4), you'll need the following (swap the above codes with those below, then):

function getSlideNumberInHash() {
    var hash = document.URL.substr(document.URL.indexOf('#')); //returns #slide-N
    var slideNumber = hash.substr(hash.indexOf('-')+1); //returns -N. The +1 will make it return N
    return slideNumber;
}

var slideToGo = getSlideNumberInHash();
slideToGo = parseInt(slideToGo); //try make it a number
if($.type(slideToGo) == 'number'){ //make sure is a number
    var delay = setTimeout(function(){
        $('#navigation ul').find('li[data-slide='+slideToGo+'] .item a').click();
    },500);
}

I used document.URL.substr instead of window.location.hash because of this comment. We not working with iframes but better prevent if needed someday :P)

Your code works beautifully btw, and thanks for helping . In the future, would be possible to change it so that it looks for a hashtag insteaad (like page.html#slide-4). I'm just worried about query string in the URL's that could cause it to fail a security scan. — Keoki, Apr 26 '13 at 20:46
Well, using hash will end on same way, you need to get it somehow. We are not using server-side here.. we are talking about JS. It's spoofable by using firebug or any developer tool :D On side note, I've updated it to check (and just runs) if the `slide` value is a number. — RaphaelDDL, Apr 26 '13 at 20:50
@Keoki Added the hash method. By the way, test it a bit because I made 'on the fly' without testing :P — RaphaelDDL, Apr 26 '13 at 21:06
@Keoki No worries. Let me know if something is wrong or you need something else. And if you think the answer was enough, don't forget to upvote and mark as answered so other people know the answer pleased you :) — RaphaelDDL, Apr 26 '13 at 21:11

Link to a Waypoint from a static page

1 Answers1