This script will automatically scroll the contents of a page element (usually a div). It can scroll vertically like the closing credits of a movie, or horizontally like a train zooming by. It requires the popular jQuery library.

Features

  • More than one scrolling element can appear on a page, and they scroll independently. If one box changes direction, the rest continue scrolling in the directoin they were already going
  • Scrolling speed is adjustable
  • When a scrolling element reaches the bottom, it can start over from the beginning again or scroll back in the other direction
  • If the user puts the mouse pointer over the scrolling element (to click on a link, for example), it stops scrolling
  • BSD license allowing personal and commercial use free of charge

Check out the vertical scrolling demo or the horizontal scrolling demo.

Download the script.

Requirements

jQuery Headline Scroll requires jQuery 1.2.1 or higher. It may work with earlier versions, but it has only been tested with 1.2.1. It should work fine with later versions as long as the jQuery Team (thanks, guys!) don’t change their code too radically.

You will need to include the jQuery script in your page before you include jQuery Headline Scroll, like this:

<script src="jquery-1.2.1.js">
<script src="jqueryheadlinescroll-2.0.js" >

Usage

To make an element on your page autoscroll, you just need to give it the class “autoscroll” and set the element’s height to something smaller than the size of your content.

<div class="autoscroll" style="height: 100px;">

Think it’s scrolling by too slowly? There are two global Javascript variables you can adjust to control the scrolling:

<script>
// How often to scroll, in milliseconds
scrollerIntervalMs = 200;
// Number of pixels to scroll every interval (defaults to 1 if not specified)
scrollerStep = 1;
</script>

Want it to scroll back the other way once it reaches the end? Add class “reversingscroll”!

<div class="autoscroll reversingscroll" style="height: 100px;">

Want it to scroll horizontally instead of vertically? Make one of its classes “horizontalscroll”.

<div class="autoscroll horizontalscroll" style="height: 100px;">

When scrolling is paused, the class “paused” is added to the scrolling element. This is how the script keeps track of which boxes are scrolling and which ones aren’t. You can take advantage of this “feature” to apply styles to a box that’s paused. See the demos for how I make scrollbars appear when the mouse is over a scrolling element.

<style>
.paused {
background-color: black;
color: white;
}
</style>

Donations

A lot of open source projects have a tip jar. I really enjoy donating money to projects I use — I’ll probably never meet the programmers in real life, so it’s not like I can buy them a beer or something. An online donation is the next best thing.

If you found this script useful, wont you please consider donating to one of the following instead of directly to me?:

Downloads

Version 2.0 (February 11, 2009)

jQuery Headline Scroll 2.0 (5kb)
jQuery Headline Scroll 2.0 (minified) (2kb)

Version 1.0 (December 8, 2007)

jQuery Headline Scroll 1.0 (3kb)
jQuery Headline Scroll 1.0 (min) (1021 bytes)