jQuery ClickScroller Plugin

This is a simple jQuery plugin used to create a horizontal or vertical clicking scroll menu. It’s lightweight, simple and easy to customize as needed.

1. Setup

• Download jQuery, and add it into the head of your document
• Download the ClickScroller package, and add jquery.clickscroller.js into the head of your document
• Optionally, grab the easing js (is included with the download package)

2. Write Some HTML

<div id="yourContainer">
	<ul>
		<li>A list item</li>
		<li>Another list item</li>
		<li>Another list item</li>
		<li>Etc...</li>
	</ul>
</div>
<a id="#clickscroll-more" href="#">More</a>
<a id="#clickscroll-less" href="#">Less</a>

3. Write some CSS

#yourContainer {
	height: 300px; /* REQUIRED FOR VERTICAL SCROLLING */
	width: 500px; /* REQUIRED FOR HORIZONTAL SCROLLING */
	overflow: hidden; /* DO NOT REMOVE */
	position: relative; /* DO NOT REMOVE */
}
#yourContainer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;	/* DO NOT REMOVE */
}
#yourContainer ul li {
	padding: 0;
	margin: 0;
}

4. Write some Javascript (well jQuery)

$(function(){
	$('#yourContainer').clickScroll();
});

4. Customize

This is how you could setup a horizontal scroller using all the options, like in the demo

$('#yourContainer-horizontal').clickScroll({
	speed: 1000, // Scroll Speed
	easing: 'easeOutElastic', // Animation easing method
	lessBtn: '#scroll-left', // Custom ID of scroll button
	moreBtn: '#scroll-right', // Custom ID of scroll button
	btnFadeSpeed: 500, // Speed of button fading in/out when not end of scrolling is reached
	horizontal: true // Make it scroll Horizontally,
	autoHideNav: false // Don't hide the navigation controls automatically
});

You’ll also want to change you CSS so the list elements are floated or inline-block…

Other Notes

• The plugin relies on an unordered list <ul> and list items <li> to be children of the container, if you use something else, it won’t work.
• When horizontally scrolling, the width of the list will be automatically calculated and applied. If you’re changing the widths of list items dynamically, you might have to get creative in the source.
• Don’t add your control links into the container.

Changelog

• “autoHideNav” option added for control over navigation controls being automatically hidden/shown.

Download

Demo