Vertical Content Scrolling

There are lot of jquery plugins available which provides horizontal or vertical content scroll functionality, like for scrolling through image gallery. Recently I had a requirement where a web page needed vertical scrolling functionality for a navigation system.

Below is a very simple example, where content of a list is being scrolled by two buttons.

• Item 0
• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

So lets get into this,
1. First we need to create a div tag with it's style overflow attribute set to hidden.

2. Add the content.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

3. Now for scrolling, we will use jquery's animate function which will provide us a smooth scrolling effect.

function scroll(val) {
            jQuery('#list').animate({
                scrollTop: jQuery('#list').scrollTop() + (val)
            }, 450);
        }

The above function takes a integer parameter which gets added to the scrollTop attribute of the div containing the content, which causes the content to scroll. The animate function makes the transition smoother, to read more about animate function go here.

4. Now what we need is just two buttons, which will call this function and pass +ve values to scroll down and -ve values to scroll up.

This a very simple example, but gives a good idea for building cool vertical content scrolling.