jQuery vScroll – Simple animated vertical content scroller supporting varying heights

This plugin turns a container with sub containers into a scrolling window with previous and next buttons, the content can be anything and the heights of these can vary as needed. The plugin is very small (minified version just over 500 bytes).

A demo of this being used on a live site I developed can be found here where it is used to scroll the news content: http://waterwell.co.uk/news.aspx

To use it simply create a container element and a previous and next button (these can be any html elements), then apply this plugin to the container element specifiying the height you want the container to be.

All sub containers will become scrollable elements which can be accessed via the previous and next buttons.
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/vscroll/demo/

How-to:

1) Basic example html markup, 2 buttons and a container with sub containers:

<input type=”button” value=”Prev” id=”prevButton” />
<input type=”button” value=”Next” id=”nextButton” />

<div style=”height:400px” id=”demo2″>

<div>some content</div>

<div>some more content</div>

<div>some other content</div>

<div>

2) Include the jQuery files (I use Google CDN for jQuery) and apply the plugin to the container:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

<script src="js/jquery.vscroll-1.2.0.min.js" type="text/javascript"></script>

<script type=”text/javascript”>
$().ready(function () {
$(‘#demo2’).vScroll({ speed: 500, height: 300, upID: “#prevButton-demo2”, downID: “#nextButton-demo2”, cycle: true });
});

</script>

Plugin can be downloaded from here:

http://plugins.jquery.com/content/vscroll-121

Plugin options:

speed – how fast the scroll animation is (default = 500)

height – height of the container element (you must include this from V1.2.0 onwards otherwise the container will default to 300px)

upID – id of the element used to trigger the up animation (default = #up-arrow)

downID – id of the element used to trigger the down animation (default = #bottom-arrow)

cycle – Whether or not to scroll back to the first item if the next button is clicked on the last item (default = true)