Learn/Code
11 of 11
Learn

Adding single page “scrolling” navigation to your site

Using popular jQuery plugins to add a single-page scrolling navigation with "current" navigation states

WORKING DRAFT: 10/30/2014

Adding “scrolling” navigation to your website can be helpful in a bunch of different scenarios. This tutorial show you how to use some popular jQuery plugins to easily add flexible nav options to your site.

You can preview how this looks in the demo (opens in new tab).

I’ve opted for an older version of his plugin that is dependent on ScrollTo because I wanted to bundle some of the additional functionality of ScrollTo, using the additional SerialScroll and LocalScroll addons. While I’m not using Serial Scroll in this particular demo, I like to have it bundled, as I’ll use it in later demos.

You’ll need to download a separate plugin file and include it on your site for this to work. I should note that I am not the author of this—I simply combined four existing jQuery plugins into one file for ease of inclusion. The popular “ScrollTo” plugin from Ariel Flesler provides the base functionality, while (a now dated version of) One Page Nav by Trevor Davis provides the navigation “current” state that updates as you click or scroll. You can download the combined file here:

Download CombinedScroll Package

Let’s find out how to get this up and running on our own site.

Set up the HTML

Step 1

The purpose of adding “scrolling” navigation is to quickly jump to different sections of your page. So first, we have to add some content so that our page is long enough to scroll to different sections. I’ve built on top of the code that you should have had after the previous tutorial, adding five separate sections on the page, which you can see in a new tab here →.

You can add whatever content you’d like, but the important thing is for each section to have a unique ID that will serve as the “anchor” for the anchor links in our navigation, and for the sections to be vertically long enough that we can scroll in between them.

In your HTML, you should have different sections that have unique ID’s like this:

If you look at my specific code in the demo, my sections look like this:

I’m using the existing <div> elements on my page that I set up in my grid. They already have classes that give them visual “layouts”—here, I’m simply adding unique IDs as identifiers for the anchor links.

In the demo, I have five unique sections on my page, each with a unique ID.

Step 2

I also added an empty <div>  at the very top of the page—right below the opening <body>  tag—with an ID of “top”. This will be used to return us to the “top” of the page.

On any site where I’m utilizing scrolling nav—or simply want to give people an option to get back to the top after a long page of content, I’ll add this “hidden” <div>  immediately under the opening <body>  tag, so I know I’m always being taken to the top-most position on the page.

Step 3

Okay, so now we have our long page of content totally set up, and now we need navigation to get us from section to section. This is achieved simply using only HTML and CSS—no javascript required. All we need to do is make a “fixed” navigation section that uses anchor links to jump us to different parts of the page.

Note: If you need a refresher on anchor links—check out the anchor link section of my tutorial about ID vs. Class (opens in new tab).

I’m going to use the navigation that we built in Tutorial 6: Building a CSS dropdown menu as a base, so I have some styles and structure to start with. But, I’m going to add another class “ page-navigation ” to the <nav>  element here, so I can override the existing styles where necessary. I’ll place this around the top of the page—below my other site-wide navigation.

Step 4

And since the point of the menu is to be visible while scrolling throughout the page, we need it to be “fixed”, or “sticky”, so that it’s always visible. We’ll use some simple CSS for this:

At this point, the page should look how we want it to (fixed to the side of the page as we scroll), and the anchor links in the navigation should actually “jump” us to the correct section of the page, as seen in this demo page. They won’t “scroll” yet, but they will “jump”.

Important: make sure your navigation anchor links are actually moving the page now!

The rest of the tutorial uses javascript to make the page appear to “scroll” between sections, but the base functionality of the anchor links needs to work properly before you add the javascript.

Progressive Enhancement is using “web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.” (From Wikipedia, read more there.)

I like these particular javascript plugins to achieve this functionality because they are progressively enhancing the page. If for some reason the user doesn’t have javascript turned on, or the files don’t load properly, the navigation will still work—you just won’t have the scrolling motion.

After that’s working, let’s move on to making it scroll.

Adding the scroll with javascript plugins

Step 5

First, include file you downloaded at the start of the tutorial in your site’s folder.

(Download CombinedScroll Package)

If you’ve been following the series from the start, we’ve been using HTML 5 Boilerplate, and that is the code package that is running with the demo. If you’re in that boat, then put the “jquery.combinedScroll.js” file inside the “js” folder within Boilerplate.

Make note of where you placed the file, so you can create a link to it from your HTML page:

Step 6

On your HTML page below wherever you include jQuery, add a new line to include the file you just downloaded and added to your project folder.

If you’re following the Boilerplate example, then your code should look like the last (highlighted) line below. (Shown with other script links in the HTML file for reference.)

It’s important that this file is included below jQuery itself, because the plugins we’re including are dependent on jQuery to function. So, the jQuery code needs to process before our plugin code.

Step 7

After you have the Combined Scroll file linked, we need to add a quick jQuery hook to our page so that the OnePageNav plugin (part of the combined file) knows to use the “page-navigation” nav element as the target navigation for the scroll.

So, somewhere within the  jQuery(document).ready function , add the following code to hook the One Page Nav plugin to the page-navigation element we created in step 3:

Note that the selector .page-navigation  is the class we added to the navigation element. Thanks to some smart plugin code from OnePageNav, that’s all we need to do to get this set up.

So go ahead an test your code out—clicking on any of the links in the fixed navigation section should scroll you to the corresponding section.

The last part to making this menu work is adding a “current” state to the menu styles, so that we know which section we’re looking at based on the menu.

Step 8

On your working page, click on any of the links in your navigation (other than top) and then inspect that element in your browser.

Screen Shot 2014-10-30 at 4.52.56 PM

If you compare the link for the section you’re on to the other links in the navigation element, you should notice that the DOM had been updated with a new class added to the parent <li> . For example, if I clicked on “Three”, the code should now look like the below code in my element inspector tool (note, you’re NOT changing this in your code—it’s just what the code looks like in the inspector tool!)

The parent <li>  of the section we’re on should now have a class="current"  attribute. The OnePageNav plugin adds this code to the nav element based on what section of the page is currently displayed in the browser window.

Cool. Now we know what the plugin is doing to the page, so we can use the output to style the navigation links.

Step 9

Let’s add a style to the CSS using the “current” class the the plugin outputs, ensuring that it’s under the default style for  nav.page-navigation a:

Make sure you refresh your page in the browser to see the changes, but now, whether you click on the nav links to scroll the page up and down, or you just scroll the page up and down, the “current” style in the navigation bar should update according to which part of the page you’re on.

At this point, your file should work like the final demo (opens in new tab).

 

That’s all for now. 

I’ll add configuration options and some more features soon.

 

 

 

8 thoughts on “Adding single page “scrolling” navigation to your site

  1. hey,
    i did every step, and its not working, i guess its just not linked as it should be,
    can you help me with that pls?

    Untitled Document

    and before the body end i pasted this:

    jQuery(document).ready(function($) {

    // Hook up the current state to the nav bar
    $(‘.page-navigation’).onePageNav();

    });

  2. i have a single link to another page can i use this code. i need this effect and also the different page navigation.

  3. Thanks for this.
    Can this be modified to allow for a unique background colour (change) for each nav item? I would like to coordinate the highlight with each of the page sections (background colour).

  4. Thanks for this. I have this working (well) in my page – but is it possible to generate a different hilite colour for each menu item (to match a section background colour)?

  5. i really dig this site.
    good tutorial too.

    i had the same problem with the page not scrolling.
    i think they messed it up a little bit.

    however i did not work with any of the pages or tutorials 1 through 10.
    but i was able to parse and figure it out.

    they key is to add a local scroll function to your page.
    it is in the source. if you can’t find it it looks like this

    ”””””$.localScroll({ duration:500, });”””””’

  6. Fantastic walk through! I really appreciate you putting this together.

    I had a small problem where the nav links became underlined after applying the scripts. In case anyone else encounters it, it can be fixed by targeting the navigation in CSS and setting text-decoration: none.

    For my class names it worked out to: .menu a{ text-decoration: none}

Thoughts, questions or qualms?