If ever an idea of custom styled scrollbar crossed your mind you have probably heard of jQuery Custom Content Scroller plugin already. It works a treat in bringing your design to new heights. And in appreciation of this amazing plugin below you will find some code which will add that little bit extra of the missing functionality.

What exactly?  Scrolling to the custom parts of the page using combination of links and anchors. You can see the working sample in our main page’s’terms of service’ bit which can be found in the footer section.

So let’s start building ourselves a playground:

1. Follow the instructions from jQuery Custom Content Scroller page to get yourself a working scroller (in this example we will be using the vertical one).
Once all the files are downloaded and included you should be looking at something very similar to the below code:

2. Now let’s add two custom id’s to define which elements we are going to scroll up and down the page:

3. After above is done let’s create a simple unordered list with some content inside it:

Make at least few of these so you fill up the screen with info and can see the visible scroller. Please note the scroller is not visible if content is not filling up the whole container and a bit more. It needs to scroll something at the first place.

4. Now that the content is produced we need a little box of links in the sidebar which, once pressed will scroll the page to the right place (anchor). So here it goes:

Again, for visual example check our ’terms of service’ section.

5. Well, it’s about time to move to javascript side of the project.

Followin a request by KAISER_SOZE there’s an extra part that can be added to the code to allow URL anchoring.

Also, to avoid the IE bug please read our blog post about hash tags here:
 http://www.kartogram.co.uk/blog/hash-tag-ie-bug

And that is it. Once again, for a working example check our ‘terms of service’ section in the main website. Should there be any questions feel more than welcome to use comment section below or contact me directly at blog@kartogram.co.uk.

Regards,
SD