Top 15 jQuery Scrolling Plugins

Sam Deering
Here are 15 superb sites that have used jQuery to displayed either the horizontal, vertical or multi-directional scrolling effect. Most of them have used the jQuery.Scroll to plugin to create a flash-like scrolling navigation experience, while some of them have used other unique jQuery scripts.


1. Cliff Scroller

Scrolls text content just like that good ol’ winamp track screen.
Cliff-Scroller-.jpg
Source


2. jQuery TopLink Plugin

Allows you to fade in a “to the top” link when the users scrolls down on the page.
jQuery-TopLink-Plugin-.jpg
Source


3. Disappearing “Scroll to top” link with jQuery and CSS

This tutorial will help you build a scroll to top link, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery.
Disappearing-“Scroll-to-top”-link-with-jQuery-and-CSS-.jpg
Source


4. UItoTop jQuery Plugin

Matt Varone made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on.
UItoTop-jQuery-Plugin-.jpg
Source


5. jQuery Scroll to Top Control v1.1

This script displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top. Instead of always being visible on the user’s screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control.
jQuery-Scroll-to-Top-Control-v1-11.jpg
Source


6. Smooth GoToTop WordPress Plugin

Starting from the smooth scroll script developed by Ariel Flesler, Mogosanu Bogdan has built a plugin for WordPress. In the settings page of the plugin, you can customize the css, the fading speed and the minimum height in pixels before revealing the control.
Smooth-GoToTop-WordPress-Plugin.jpg
Source


7. Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around.
Scrolling-Parallax-A-jQuery-Plugin-.jpg
Source


8. jQuery SimplyScroll Logic Box

jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically. It can also accept dynamic image input via a Flickr feed (note not full API integration) or a local JSON source.
jQuery-SimplyScroll-Logic-Box-.jpg
Source


9. Background Scrolling Effect with jQuery

In this tutorial, we’re not only going through how to make it, we will have it in plugin as well which allow user to customize the speed of the movement and direction (vertically, horizontally and diagonally).
Background-Scrolling-Effect-with-jQuery.jpg
Source


10. Infinite Scroll Effect With jQuery and ColdFusion

This is not a new effect but, this “infinite scrolling” effect is definitely interesting and something that you’ve never played around with.
Infinite-Scroll-Effect-With-jQuery-and-ColdFusion-.jpg
Source


11. Load Content While Scrolling With jQuery

We generally have lots of content to present but cannot load all of it at once as it may take too long. In this tutorial you will have now your content loading while scrolling feature and created a similar one using jQuery.
Load-Content-While-Scrolling-With-jQuery-.jpg
Source


12. Animated Scrolling for Same-Page Links

In this tutorial you will learn how to animate scrolling for same-page links.
Animated-Scrolling-for-Same-Page-Links-.jpg
Source


13. A jQuery Horizontal Scrolling News Ticker

Takes any old unordered (ul) list with a unique ID and transforms it into a simple side-scrolling news ticker that has a variable speed control and also actually pauses on mouseover events, making navigation from the bar particularly easy.
A-jQuery-Horizontal-Scrolling-News-Ticker.jpg
Source


14. Scroll Effect with Local Anchors

This is to make some scroll effect inside a page anchors to target.
Scroll-Effect-with-Local-Anchors-jQuery-.jpg
Source


15. Create Infinite Scroll Effect using jQuery

Learn how to make an infinite scroll effect using jQuery.
Create-Infinite-Scroll-Effect-using-jQuery-.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.