This script is supposed to scroll the text when clicking on the up or down icons (it does that, but then the draggable icon goes to top of page), and you should also be able to drag the draggable icon up and down the scroll bar. Clicking in the scroll bar should also move the text up or down. Although the script works perfectly on the author's site , on mine, only the up and down icons scroll the text.

Here you may view what is happening on this page:

Here's the code: (I am pretty new to javascript, btw, my understanding is limited. I have marked in comments with where I think the problems are...)
// Coded by Travis Beckham
// |
// If want to use this code, feel free to do so, but please leave this message intact.
// --- version date: 01/24/03

// Scroller Class
ScrollObj = function(speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj){
this.speed = speed; // scrolling speed
this.dragHeight = dragHeight; // Height of scrollbar drag
this.trackHeight = trackHeight; // Height of scrollbar track
this.trackObj = getElement(trackObj); // Refers to the scrollbar track div
this.upObj = getElement(upObj); // Refers to the up arrow div
this.downObj = getElement(downObj); // Refers to the down arrow div
this.dragObj = getElement(dragObj); // Refers to the scrollbar drag div

this.contentMaskObj = getElement(contentMaskObj); // Refers to the content mask div
this.contentObj = getElement(contentObj,contentMaskObj);
this.obj = contentObj+"Object";

/* this is not yet working properly and is not properly constrained. Goes all the way to the top of window. */
this.trackTop = this.dragObj.getTop(); // Scrollbar top contraint
this.trackLength = this.trackHeight-this.dragHeight; // Adjusted track height
this.trackBottom = this.trackTop+this.trackLength; // Scrollbar bottom contraint

this.contentMaskHeight = this.contentMaskObj.getClipHeight(); // Height of the div that masks the content div
this.contentHeight = this.contentObj.getHeight();
this.contentLength = this.contentHeight-this.contentMaskHeight;
this.scrollLength = this.trackLength/this.contentLength;
this.scrollTimer = null;

/* this is where I tell scrollbars to hide if the content is not tall enough to need them */
if(this.contentHeight <= this.contentMaskHeight){
var self = this;
this.trackObj.addEvent("onmousedown", function(e){self.scrollJump(e);return false});
this.upObj.addEvent("onmousedown", function(){self.scroll(self.speed);return false});
this.upObj.addEvent("onmouseup", function(){self.stopScroll()});
this.upObj.addEvent("onmouseout", function(){self.stopScroll()});
this.downObj.addEvent("onmousedown", function(){self.scroll(-self.speed);return false});
this.downObj.addEvent("onmouseup", function(){self.stopScroll()});
this.downObj.addEvent("onmouseout", function(){self.stopScroll()});
this.dragObj.addEvent("onmousedown", function(e){self.startDrag(e);return false});
if(iex) this.dragObj.addEvent("ondragstart", function(){return false});
ScrollObj.prototype.startDrag = function(e){
this.dragStartMouse = getYMouse(e);
this.dragStartOffset = this.dragObj.getTop();
var self = this;
document.addEvent("onmousemove", function(e){self.drag(e)});
document.addEvent("onmouseup", function(){self.stopDrag()});
ScrollObj.prototype.stopDrag = function(){
ScrollObj.prototype.drag = function(e){
var currentMouse = getYMouse(e);
var mouseDifference = currentMouse-this.dragStartMouse;
var dragDistance = this.dragStartOffset+mouseDifference;
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
ScrollObj.prototype.scroll = function(speed){
var contentMovement = this.contentObj.getTop()+speed;
var dragMovement = this.trackTop-Math.round(this.contentObj.getTop()*(this.trackLength/this.contentLength));
if(contentMovement > 0){
contentMovement = 0;
}else if(contentMovement < -this.contentLength){
contentMovement = -this.contentLength;
if(dragMovement < this.trackTop){
dragMovement = this.trackTop;
}else if(dragMovement > this.trackBottom){
dragMovement = this.trackBottom;
this.scrollTimer = window.setTimeout(this.obj+".scroll("+speed+")",25);
ScrollObj.prototype.stopScroll = function(){
this.scrollTimer = null;
ScrollObj.prototype.scrollJump = function(e){
var currentMouse = getYMouse(e);
var dragDistance = currentMouse-(this.dragHeight/2);
var dragMovement = (dragDistance<this.trackTop) ? this.trackTop : (dragDistance>this.trackBottom) ? this.trackBottom : dragDistance;
var contentMovement = -(dragMovement-this.trackTop)*(1/this.scrollLength);
// End of Scroller Class

// Load Scroller Functions.
// Note: I discovered the order of scroll objects is very important. Won't work otherwise.
window.onload = function(){
/* speed, dragHeight, trackHeight, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj */
myScroll = new ScrollObj(6,27,294,"scrolltrack","scrollup","scrolldown","scrolldrag","contentMask","content");
// End of Load Scroller Functions