Screenshot of the Scrollbar Contents navigation bar

A while ago I talked about a problem with long pages on the web due to excessive comments; quite often when looking at a blog post your impression of it's length from the scrollbar will be influenced by the number of comments.

Here are a few examples:

I suggested the solution of 'Visual Page Contents', and now I've made this a reality.

See Scrollbar Contents in action

How to use this on your website

  1. Download scrollbar-contents.js and scrollbar-contents.css
  2. Include these files in your page along with the latest jQuery library
  3. Add .scrollbar-contents classes to the headings that you want to include in the scrollbar contents navigation, for example <h3 class='scrollbar-contents'>Comments</h3>
  4. If needs be, customise the appearance by editing the bottom section of scrollbar-comments.css

Comments

Andy Mangold says

3 June 2009 - 2:13am

This is a really great idea and execution, Tom. I am going to be messing around with it...

Dave says

3 July 2009 - 3:11pm

This is a really great navigational feature - I'm definitely going to try and work this into a future project!

Sacha says

27 October 2009 - 9:00am

Great idea, blogs like techcrunch should implement this right away. It would look especially cool with 16px icons instead of text.

Ben Gillbanks says

27 October 2009 - 1:44pm

I like this a lot. Thanks for releasing it. It would be great if the code would do a smooth scroll from place to place when you clicked the different sections

Opi says

12 November 2009 - 5:19pm

So smart.
Gonna be perfect with icons & smooth scroll. I will implement it for sure !!

Tyno says

27 December 2009 - 1:13pm

Very nice! Good work.

Anton says

22 August 2010 - 12:58pm

That's a great idea! This is a great example of the concept of universal design - now we potentially have a 'skip to content' in that is useful to all users. Bravo!

rvision says

8 November 2010 - 2:22pm

This is awesome idea. Simple and great.