posted on:April 3, 2008

Easy Scroll Accessible Content Scroller

It has been a while since I presented some unobtrusive (hopefully useful) JavaScript function. Recently I have been working on a project that demanded content scrolling, so instead of reaching out for some heavy unobtrusive solutions, I decided to write my own function. As I was developing it I kept simplifying it so I came down to what I am presenting today – Easy Scroll v1.0, an accessible, unobtrusive 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.

Take a look at the demo
| Download Easy Scroll v1.0


Easy Scroll is capable of scrolling any type of content by using unobtrusive JavaScript. It has up and down scroll options and reset button that places your content in the default position.
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:

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

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">

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

You might want to set the variables in the JavaScript. When you open easyscroll.js you’ll notice these variables in config area

var id = "myContent";

This id matches the one you have in your html file for content div. If you wish to change it, you must do it in both html and JavaScript

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.

DeliciousStumbleUpon RedditSubscribe

Comments (87 Comments)

  1. ani625
    April 3, 2008

    Cool article dude! And btw, Link updated on delicious.
  2. cssglobe
    April 3, 2008

    Thanks ani625 :)
  3. b0li
    April 3, 2008

    nice article greetings
  4. kerberoS
    April 3, 2008

    Great effect :)
  5. WebTecker
    April 3, 2008

    Thats a very cool effect Alen.
  6. cssglobe
    April 3, 2008

    Thanks guys :)
  7. Tomas M
    April 3, 2008

    Hello, that i'm looking for long time! thanks a lot :-) can be used for left/top scrolling ?
  8. cssglobe
    April 3, 2008

    Thanks Tomas. This version supports up and down, but who knows I might code a left-right scroll soon too.
  9. Germรƒยกn
    April 3, 2008

    Really useful! :) Thank you! ;)
  10. davidwalsh
    April 4, 2008

    Great work Alen!
  11. Steph
    April 4, 2008

    Gasp! I've been looking for something like this for awhile - I know it's on a few sites, but it was never validated or just didn't have Thanks Alen!
  12. Chad Smith
    April 4, 2008

    I've seen this while looking for a Horizontal Scroller (went with mootools). But this example really seems like something i'd use. thanks!
  13. Derek
    April 4, 2008

    I wouldn't call this accessible though - you can't control it using the keyboard.
  14. cssglobe
    April 4, 2008

    When I said accessible I meant that content is accessible. That's the important thing. Scrolling things is purely presentational.
  15. ani625
    April 4, 2008

    "Join 3000+ subscribers and receive our content instantly." Therem fixed it!
  16. cssglobe
    April 4, 2008

    @ani625: updated ;)
  17. Roman Lokhov
    April 5, 2008

    Great work Alen! But don't you think that to use offsetHeight and offsetTop is very slow? Especially if the "myContent" have many content (images, flash)?
  18. webfruits
    April 6, 2008

    I'm using it on my portfolio... great! I have customized scroll buttons by adding background images. It works perfect, thanks :-)
  19. cssglobe
    April 6, 2008

    I checked it out... Looks great! Glad you could find a use for it.
  20. Philly Dude
    April 9, 2008

    Sweeeeeeet!!!! Nice, simple and easy to customize.
  21. emre
    April 11, 2008

    thanks for article... but I want ask a question, how can I replace "graphic" instead of texts... I mean; I want add UP and DOWN ARROW to the leftside of my div... can I do that with this script?
  22. cssglobe
    April 11, 2008

    @emre: sure you can. It is done via css. webfruits in the comments above did that on her site, you might want to check that out.
  23. Alberto
    April 13, 2008

    It is posible add more than one easyscroll, I mean have several <div> with this funtionality. Thanks, great job.
  24. AndreiZorrov
    April 13, 2008

    Useful!!!! Thank you very much! I searched for a very long time
  25. mexx63
    April 17, 2008

    Cool, but about the width? How to make 100% or 90% of the page? Thanks
  26. cssglobe
    April 17, 2008

    @mexx63: that is done with css. In my demo the actual width is defined by the container. You can easily set it to whatever you want.
  27. Mya
    April 17, 2008

    Excellent work Alen! I like that you didn't use an existing JS library. this will come in handy for future projects. Thanks for sharing!
  28. Deborah
    April 22, 2008

    Awesome! Just what I was looking for! Thank you so much for making this available for all to share... Your work at PixelPusher is terrific. dj
  29. Juvenn
    April 22, 2008

    Thanks for sharing!
  30. Krystal
    April 23, 2008

    This is AWESOME but I can't figure out how to apply this code so it works with up and down arrows. I am a beginner with CSS but haven't been able to figure out how Webfruits made the adjustment on her website. PLEASE HELP ALEN!
  31. Daddo
    April 29, 2008

    Great article and thank for sharing. I think I'll be using it soon on my sites... :-D
  32. Aaron Mc Adam
    May 6, 2008

    Is there a way to make the content scroll itself? and then stop when the mouse hovers over it?
  33. graham
    May 7, 2008

    This is great, so thanks for sharing it. However, I'm wondering how to add two blocks of scrolling text at different points on a page. If it uses ids, is this even possible?
  34. weremoose
    May 10, 2008

    Great, simple script... Very usefull. I was searching for a left-right one and I found this one. Well done!
  35. Pete
    May 13, 2008

    Nice work. thanks for sharing it. Looks like I'm not the only one who's after a lefty righty version! I wanted to do a scrolling image gallery where all the pics are the same height and contained within a fixed height (and width) DIV like but without the need for scrollbars.
  36. Jim
    May 15, 2008

    I'm trying to use this script but without the "reset" tab - what do I do if i want to not use that portion of the script?
  37. victoria
    May 23, 2008

    this is great but how can I apply up/down arrows and place them exactly where I want them? I am a beginner too...can't figure out what webfruits did.
  38. victoria
    May 29, 2008

    OK. I have it working on every browser except MIE 6.0 and newer on a PC does not like it. Suggestions anyone?? Here is the page I'm using it on
  39. fracto
    May 29, 2008

    Hello!! I see the example of the web I see the code to apply for my web but don't work correctly. Can you explain what is the code makes run correctly the script? (on the files .html, .css and .js) Thank you very much!! Good job!
  40. Tim Wye
    June 5, 2008

    This is fantastic - many thanks for making it available ! One question, though - anyone know why it doesn't display properly on IE6 ? The roll-over images don't work properly - instead of replacing the original graphic with the hover graphic, IE6 displays the two images vertically stacked without any roll-over swapping. (See webfruit's page if you have IE6). Works fine on later versions, and on Firefox.
  41. Jacob
    June 6, 2008

    Nice script :D But, Is it possible to make it scroll horizontally instead? - Jacob
  42. Matias
    June 11, 2008

    you are the man... thank you
  43. Rainer
    July 2, 2008

    The scroller ISN'T accessible because of not working only with keyboard. Without mouse and with JS enabled I can't use them. And so the content isn't accessible for impaired people working without mouse but JS enabled! Sorry, good work but not to end.
  44. Simon Dempsey
    July 5, 2008

    Super sweet bit of css Alen, nice work (the people love you!) I notice a number ppl struggling witht the hover over image function (as per Webfruits site) - this is done with css people - check out this code from my style sheet: #btnUp{ background-image: url(../images/global/scroll-up_off.gif); background-repeat: no-repeat; float: left; height: 9px; width: 67px; margin-right: 4px; } #btnUp.over { background-image: url(../images/global/scroll-up_on.gif); background-repeat: no-repeat; text-decoration:none; } #btnDown{ background-image: url(../images/global/scroll-down_off.gif); background-repeat: no-repeat; float: left; height: 9px; width: 67px; margin-right: 4px; } #btnDown.over { background-image: url(../images/global/scroll-down_on.gif); background-repeat: no-repeat; text-decoration:none; } Great job again Alen!
  45. nodosur
    July 6, 2008

    the buttons with text can be replaced by buttons with images
  46. Chrissy
    July 9, 2008

    Did anyone say if two can be used on the same page? I tried it, and one worked in IE, and the other worked in FireFox. Let me know if anyone has had luck with this! Thanks.
  47. Gabor
    July 10, 2008

    The script is just perfect! If you want to use image buttons instead of text buttons do the following: 1. Change script var nav to: var nav = ["", "", ""]; 2. Take out the line: background in style in #easyscrollnav li 3. Add this lines to style: #btnUp{ background:url(your_image.jpg)no-repeat 0 0; } #btnDown{ background:url(your_image.jpg)no-repeat 0 0; }
  48. Dempo
    July 11, 2008

    I am having problems with IE - has anyone fixed this? IE positions the "MyContent" div left on the page and the content itself appears below the buttons - any direction appreciated.
  49. Saboravallarta
    July 11, 2008

    Yo pense que esto seria gratis, pero ya veo que no, lo que si es gratis es visitar: Noticias Radio y Television Online desde Puerto Vallarta Saludos !!
  50. dario
    July 15, 2008

    Great Job. But if i'd like insert more than one? Is it possible?
  51. Michael
    July 18, 2008

    To dario, and the others that have asked about duplicitous use, from what I can see, no, not readily at least. If you'll notice in the html, the div for the scrolling content is labeled as an ID, not a CLASS, ergo, one per page. Which is not to say that some tweak to the js might allow for multilple IDs of different names. I'm not sure of the liklihood or not, just a thought. Perhaps the author might chime in. Oh, and thanks for a very nice implementation.
  52. Owain
    August 1, 2008

    Hi, I'm pretty new to Js and have the same problem as a few other people that have posted before me. Im trying to use easyscroll in the same way as the webfruits site. where the buttons are down the right side of the content area... The site im currently working on has a scroll bar by using the overflow css property.. Does anyone know anywhere online which shows you how to position the buttons to the right?
  53. Jorgen Farum Jensen
    August 1, 2008

    I've tried to put a border around the scrolling tekst and some padding thru a line = "1em" This doesn't seem to work. I'm sure there must be a way, but how?
  54. Steph
    August 3, 2008

    Worked great on a site I designed and coded recently > for the tour dates :) Still wish I could switch the buttons though - but still good scroller!
  55. JanB
    August 8, 2008

    You should find a way to allow use the mouse-scrolling-wheel, because I hate it to use one given method to scroll. Sometimes I use the arrow keys, sometimes I grab the scrollbar or the top-down-arrows or as I said my mouse keys. Be allows prepared for users like me ;)
  56. sjl
    August 11, 2008

    I agree with JanB there should be use for the mouse wheel. I still think it is a great piece piece of script and it offers an alternative to a scrollbar.
  57. Pundit
    August 12, 2008

    Nice stuff, but I'll echo the comments relating to usability because I consider this quite a major issue. To go even further, why bother reinventing the wheel at all? As far as I can tell, there is one advantage of this approach: a slightly nicer look than a normal scrollbar. However, as far as I'm concerned, the disadvantages far outweigh that: no indication of how much content there is, an inability to jump to any point in the content, no mouse wheel/keyboard support. In general, it's actually much harder to use this device than a standard scrollbar, which we get 'for free'. Maybe I'm misunderstanding the intent here - do you have a use case which demonstrates the need? Cheers.
  58. vicky
    August 19, 2008

    Hi, I noticed that this website is using easy scroller but v2. The site URL is I like the way I can scroll with arrows and how it auto scrolls. Is this the same base script as what you are refering to or is this another? I can't find information on how to mock it up. Thanks vicky
  59. Spencer Smith
    August 19, 2008

    how do you put the buttons at the bottom of the scrolling text? Thanks. spencer
  60. Shobz
    August 24, 2008

    Is there any way to reset div position (essentially an onClick event to reset the div position) by clicking on a button other that the Reset button provided in the script? This Script REALLY rocks!!... I just love it!!! Thnks a ton! :)
  61. Jonas
    August 25, 2008

    @Spencer: in the js-file, change this line: parent.insertBefore(ul,container); to: parent.insertAfter(ul,container);
  62. Jonas
    August 25, 2008

    function insertAfter( newElement, referenceElement ) { var parent = referenceElement.parentNode; var nextSibling = referenceElement.nextSibling; if ( nextSibling) { parent.insertBefore(newElement, nextSibling); } else { parent.appendChild(newElement); } }
  63. Jonas
    August 25, 2008

    Click my name for scroll images example.
  64. Spencer Smith
    August 26, 2008

    @Jonas, thanks for the tip. For some reason though, i can't get it to work. The buttons just disappear. you can look at my stuff here (i posted an example): Thanks. spencer
  65. melania
    August 27, 2008

    thanks a lot! i've been looking for something like this. very useful and nicely clear !! >;)
  66. Ted
    September 10, 2008

    Hi folk. This is a great scroller and an excellent basis for any project you wish to build on. However, I hava a little problem. The scroller works fine using IE6 but I am having a problem with scrolling when using Firefox. Firefox: 1) Mouse hover over the down button, scrolling functions a little jumpy. 2) Mouse over the up button, no scrolling on hover. Scrolls at half speed when button clicked. Has anybody experienced this problem and if so, maybe you can advise the fix. Again, using IE the scroller functions as designed Thanks
  67. Kristof
    November 15, 2008

    Hi, Great scroller but I doesn't work for me on IE7. It will only display single words per line. On IE6 & Firefox it works ok. Did anyone else had same problem? Any ideas? Thank you for any assistance :) Kristof
  68. tenksheep
    November 23, 2008

    great script, wish it could function horizontally also..
  69. Abhinav Shine
    November 25, 2008

    Yes, this is really awesome ! But facing some browser compatibility problems! Good work :)
  70. Stephen
    December 9, 2008

    Very nice. Thanks. I did come up with a couple enhancements if your interested. One is to not keep keep the timer event running all the time, just start it on the mouseover and turn it off on the mouseout. I also turn it off when it scrolls to the end so its not jumpy. Was a bit of a trick to get it to support more than one on a page but you can stuff everything into the obj (the div) and then you can have it dynamically support as many as you want.
  71. mayavada
    January 15, 2009

    This is exactly what I've been looking for, however, I can't seem to get it to work. I'm a beginner with web pages, so I apologize if I'm missing something obvious. I follow the instructions by putting the Javascript link in the Head of my HTML document and I create and assign a div id "myContent". I even took the CSS off the demo and placed it in along with everything else. Is there something I'm missing? Do I have to format any overflow, height or width in myContent CSS? Thanks All.
  72. Donna
    January 16, 2009

    This is really great! Thanks Alen, I'm a beginner who's learnt heaps through trying to implement this. Having said that, for some reason my scrolling will only happen in one direction - UP! on both the up and down arrows (I've used arrow images and moved them to the right side.) The reset works perfectly, and so does the scroll up. The prob is the scroll down also scroll's up. I've been examining every line but don't really know what I'm looking for. Can anyone give me a hint? Thanks again, much appreciated! Donna
  73. Donna
    January 16, 2009

    ah perserverance is key! I figured it out, I had css styling for mycontent div in the easyscroll.css to position my content. I took it out and it all started working! I put the mycontent div inside the maincontent div and controlled the positioning through maincontent in css. I got there in the end! Thanks for such a nifty tool! :)
  74. Ronald
    February 3, 2009

    Nice script one thing I am still struggling with however is getting the buttons (images in my case) to appear under the container rather than above it. I tried the suggestion above )replace the 'Before' with 'After' in the script but then as mentioned the buttons simply dissappear. Does anybody know how to change the script so the buttons appear under the container?
  75. Jerome
    February 5, 2009

    Very smooth, does anyone know how to get 2 easyscroll windows on 1 page? I tried for hours changing var and stuff butt without any succes.
  76. Einar Pall Svavarsson
    February 9, 2009

    Thanks, and a great work. I have used this with good result and small changes on two websites.The first one with one scrollbar and the second with two scrollbars. - one scrollbar and on the University of Iceland web page - two scrollbars. Sorry about the long url. Best regards Einar
  77. jackie fitts
    February 18, 2009

    I also am wondering about how to get 2 on the same page - if anyone has any input please let us know - thank you
  78. Einar Pall Svavarsson
    February 19, 2009

    TWO SCROLLBARS ON SAME PAGE For those who are looking for 2 on the same page, please read my comment above from February 9th.
  79. Webtiful Search Engine SEO
    February 26, 2009

    Great advice, love it.
  80. fatherb
    March 3, 2009

    works great except in firefox where it is very jerky, shaky, jumpy when scrolling. does anyone have a fix?
  81. woody
    March 25, 2009

    Hi, does this to support anchor tags, I want to click on a link outside the scrolling div and the content in the scrolling div to scroll to the <a name="name"> tag. In iE7 it works perfectly but in safari and firefox the whole page moves off the top of the screen placing the name tag at the top of the page - anyone else had problems with this? Otherwise fantastic script - thank you. Matt.
  82. ana
    March 31, 2009

    Finally the great scroll! Thanks a lot for sharing
  83. xaer8
    May 4, 2009

    Planning to use this useful javascript on my blog. Fantastic. Thanks a lot for sharing.
  84. Cliff
    May 12, 2009

    Alen, thanks for the beautiful script! I've altered it a little but can't see how to make text loop. Is this possible? Best regards, Cliff
  85. JonDee
    June 15, 2009

    Great Script!!! I am having a problem, though and was hoping someone cold help. If I put the div in a table, like this: <td rowspan="2" valign="top"><div id="myContent"> My text is very narrow in IE7. Is there a way to fix this? Thanks!!!!
  86. Mic
    June 19, 2009

    very nice! athx alot!
  87. Jeevan4u
    June 20, 2009

    thanks a lot for this useful information

Sorry, the comment form is closed at this time.