Javascript js Rolling Smooth Page Scroller

The purpose of this tutorial is to show you how to roll (or scroll) the webpage up or down. What is good about this particular javascript is that it is not reliant on <a href> tags so your existing link behavior is not altered and no event listener needs to be used. That also means that the URL of your webpage does not get a hash attached to the end of it (an anchor such as #moveHere), so if someone links to your page, there is no hash to deal with. Instead, because scrolling is invoked by javascript, you simply make a call to "rollPage()" by using "onclick". Example function calls to "rollPage()" include the following:

Example Function Calls:

<span onclick="rollPage('down', 200);">Roll DOWN 200 pixels</span>
<span onclick="rollPage('up', 200);">Roll UP 200 pixels</span>
<span onclick="rollPage('top', 0);">Roll to TOP (roll to the top of the webpage)</span>

Try Out The Rolling:
Click on the links below to observe how the rolling function operates on a webpage.

Roll DOWN 200 pixels
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Roll UP 200 pixels
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Roll to TOP (roll to the top of the page)

Here's the Javascript:
In order to add this javascript to your webpage, just copy-n-paste the code below. Then makes function calls to "rollPage" in your webpage as may be needed. If you don't want to allow Y-scrolling to go beyond a certain point in the webpage then you can set the variable "rollYBoundary" a numeric value such as 200. In that case, the page would not scroll down more than 200 pixels which is useful if much of your content is located at the same Y-location in your webpage (such as layered divs).

<script language="javascript" type="text/javascript">
/* Page roller - this script rolls a webpage up or down; www.virtualsecrets.com */
var rollSpeed = 10;			/* Roll recursion speed in milliseconds */
var rollDirection = "down";		/* Roll direction; either "top", "up" or "down" */
var rollAmount = 200;			/* Distance, in pixels, to roll */
var rollMovePerIteration = 5;		/* Amount, in pixels, to move for each iteration */
var rollYBoundary = 0;			/* When rolling down, define the boundary that Y scrolling cannot go beyond; 0 for no boundary */
var rollVal; var rollTrigger = 0, rollCurrent = 0, rollYStartPosition = 0;
function rollPage(direction, distance) {
if (rollTrigger == 0) {
		       rollTrigger = 1; rollCurrent = 0; rollYStartPosition = 0; rollDirection = direction; rollAmount = distance;
		       /* Determine the current position of the window */
		       if (document.body) { rollYStartPosition = document.body.scrollTop; }
		       else if (document.documentElement) { rollYStartPosition = document.documentElement.scrollTop; }
		       else { rollYStartPosition = window.pageYOffset; }
		       if (rollYBoundary > 0) {
					       if (rollDirection.toLowerCase() == "down") {
											   if (rollYStartPosition < rollYBoundary) {
																    /* Start rolling */
																    rollVal = setInterval("rollStep()", rollSpeed);
																   }
											   else { rollTrigger = 0; }
											  }
					       else {
						     /* Start rolling */
						     rollVal = setInterval("rollStep()", rollSpeed);
						    }
					      }
		       else {
			     /* Start rolling */
			     rollVal = setInterval("rollStep()", rollSpeed);
			    }
		      }
}
function rollStep() {
rollCurrent = rollCurrent + rollMovePerIteration;
if (rollCurrent >= rollAmount && rollDirection.toLowerCase() != "top") { rollTrigger = 0; clearInterval(rollVal); }
else {
      var rollStatus = 1;
      if (rollDirection.toLowerCase() == "down") { rollYStartPosition = rollYStartPosition + rollMovePerIteration; }
      else { rollYStartPosition = rollYStartPosition - rollMovePerIteration; }
      if (rollYStartPosition < 0) { rollYStartPosition = 0; rollTrigger = 0; rollStatus = 0; clearInterval(rollVal); }
      else {
	    if (rollYBoundary > 0 && rollDirection.toLowerCase() == "down") {
									     if (rollYStartPosition >= rollYBoundary) { rollYStartPosition = 0; rollTrigger = 0; rollStatus = 0; clearInterval(rollVal); }
									    }
	   }
      if (rollStatus == 1) { window.scrollTo(0, rollYStartPosition); }
     }
}
</script>