posted on:April 3, 2008
Easy Scroll Accessible Content Scroller
I am not using any JS libraries with Easy Scroll. Although I enjoy jQuery a lot, I believe that it is important to code in "regular" JS, just not to forget it 🙂
So, Easy Scroll is standalone, lightweight script that is very easily applicable.
It also features double speed. When buttons are rolled over, slow scrolling starts. When buttons are pressed, speed increases.
Ok, let’s get it going
To start with Easy Scroll download the script, and link it to your document by placing this line of code inside the head tag:
You’ll also need a div with custom id (default is "myContent"). Then you should put some content in it of course 🙂
<div id="myContent"> <!-- YOUR CONTENT HERE --> </div>
Believe it or not, as far as the markup is concerned, that’s it!
The script takes it over from here.
It creates another div id="easyscroll" and places your content div inside and takes care of the absolute positioning, scroll buttons and scrolling.
Setting things up
var id = "myContent";
var nav = ["Scroll Up", "Scroll Down", "Reset"];
Text that appears inside of each scroll button.
var navId = ["btnUp", "btnDown", "btnReset"];
These are optional id’s for scroll buttons in case you want to apply some specific CSS for each.
var speed = 5;
Movement speed. The larger the number the faster the scrolling will be.
var height = 200;
Desired height of the Easy Scroll area.
Use css to style the content area. Oh yes, buttons are rendered as unordered list. Use css to style those too 🙂
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (87 Comments)
Sorry, the comment form is closed at this time.