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
- Download scrollbar-contents.js and scrollbar-contents.css
- Include these files in your page along with the latest jQuery library
- Add
.scrollbar-contentsclasses to the headings that you want to include in the scrollbar contents navigation, for example<h3 class='scrollbar-contents'>Comments</h3> - If needs be, customise the appearance by editing the bottom section of scrollbar-comments.css
- 18 May 2009
- Login to post comments
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.