fork me on github

Smooth Scroll Select Menu Jquery Plugin

This plugin was created in order to style select tags with extremely large amounts of options.


  • Changes select and option tags to a ul with lis tied to a hidden input.
  • Scrolls page down to the top of select to allow the greatest number of options to show on page.
  • Adds scroll lis to the top and bottom of the list if the list is too big for the page.
  • Includes click to scroll and hover to scroll behaviors. Hover is the default.
  • Allows hover to scroll time to be adjusted.
  • Supports after select and after open callbacks.
  • Select classes and Id are transferred to new div wrapper.
  • Mouse wheel will scroll list.
  • Degrades gracefully when javascript is disabled.

Basic hover to scroll example


Change hover scroll speed example

	scrollTime: 80

Click to scroll example

	scrollEvent: 'click'

After open callback example

	scrollTime: 200,
	afterOpen: function(wrapper){
		wrapper.find('li').each(function(index, element){
			var colors = ['red', 'white', 'blue']
			$(element).css('background-color', colors[index % 3]);

After select callback example

	afterSelect: function(clicked_li){
		alert('You selected ' + clicked_li.html() + '!');

Small select that doesn’t trigger scroll lis




On GitHub:

Thank You

blog comments powered by Disqus
Brent Wooden