When you’ve used twitter bootstrap to kickstart your html, you surely have visited the bootstrap homepage at some point. When you did you should have noticed the side menu which is always displaying your current position on the (very long) page.

This menu is powered by the scrollspy and affix plugin also offered by twitter bootstrap. It’s fairly easy to integrate this menu in your own project, which I did lately.

The problem

At some point my menu got too long and that caused two problems for the user: first, the currently highlighted menu item was not visible anymore and second, it was not possible for the user to scroll the menu to reach menu items which were below the currently highlighted one.

This is a problem since there are many people out there with 1280×1024 screens and sometimes you just don’t want your browser to fill the whole screen. We need to support the user here.

The solution

So we want to accomplish two things here, first, the current position must always be visible to the user and the user must be able to scroll to the desired menu item even if it’s too far below the screen.
The second problem is solved very easy by applying some CSS magic on the menu:

style="height: 95%; overflow-y: auto"

Now we have a scrollbar the user can use to scroll to any menu item. But it’s the user’s job to find the current highlighted item – and that can’t be good.
To solve the first problem and also provide the user with some eye candy I choose to use the animatescroll jQuery plugin, which is very easy to use without any configuration and creates a nice scrolling animation.

All we have to do is to watch for changes in the menu, which occur every time a new menu item gets highlighted. Every time this happens a new menu item gets the .active class and the scrollspy plugin fires the activate.bs.scrollspy event.

$('#nav').on('activate.bs.scrollspy', function () {
  item = $('#nav').find(".active").last();
  item.animatescroll({element: '#nav', padding:20});
});

It’s important to select the last() element found by the find(“.active”) method because if you have a menu with more than one level (which you usually have) the menu will contain more than one .active menu item. One for every menu parent.

That’s it. Now we have a nice scroll animation which follows the user as he scrolls through the page.

You can try the live demo here or have a look on the github repo here.
Note: In the codepen demo i had to embed the scrollspy.js script into the js window, so don’t freak out when you see all the javascript there, the only part you actually need is on the bottom 😉