Search code examples
jquery-waypoints

Linking to waypoint from external page

So i'm using the jQuery waypoints plugin for the navigation of a single page site

Right now it looks like this:

<div class="navigation">
<ul id="navi">
    <li data-slide="1"><a href="#">DC3</a></li>
    <li data-slide="2"><a href="#">THE ABOUT</a></li>
    <li data-slide="3"><a href="#">THE WORK</a></li>
    <li data-slide="4"><a href="#">THE CLIENTS</a></li>
    <li data-slide="5"><a href="#">THE WHO</a></li>
    <li data-slide="6"><a href="#">CONTACT</a></li>
</ul>

and each data-slide moves to a separate div like this:

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".5">

What I want to do is use the same navigation on a second page, that will target each data-slide div on teh original page. Is there a way to do this?

Solution

  • A very simple solution is to used named anchors. In the HTML, next to each element you want to target add a new anchor element like <a id="slide"></a> and then you can link to that anchor's position on the page by using a fragment in your URL like so example.html#slide.