Introduction
Configure Our Script
Getting Into the Code

Some of these will not make sense quite yet, because they are defined before the primary function of the program to ensure that they have been loaded before the primary function begins to execute. After reading the article, you may want to re-read it so those functions begin to be clearer and are seen in context.

The first function will be one that returns the page's current vertically scrolled position, and has been named "getVPos". This is one of the more complex functions in the program because we must take into account the multiple Document Object Models (DOM) that can be encountered in the world. I have chosen to "sniff" for three DOMs: Netscape, Internet Explorer 5, and Internet Explorer 6. By using "if" statements to check for DOM elements that are specific to each DOM, I can set a variable to the proper DOM value of the pages vertically scrolled position given the environment my script is running in. I will then return that value so that my function call to this function returns the current vertically scrolled position of the page.


function getVPos() {
var scrolled; //Declaring a local variable
if (document.documentElement && document.documentElement.scrollTop) { scrolled = document.documentElement.scrollTop; } //Sniffing for IE5
else if (document.body) { scrolled = document.body.scrollTop; } //Sniffing for IE6
else { scrolled = window.pageYOffset; } //Sniffing for Netscape
return scrolled; //Returning the variable
}


The next function we will need is one to clear out the clock in preparation for re-initializing the clock to start the next cycle. Remember that earlier we declared the global variable "clocking". But we did not initialize it. At the END of each program cycle, setting it to a function that counts down the number of milliseconds we originally set in the configuration initializes "clocking". Because of this, we must clear this at the BEGGING of each cycle. So, we will call this function, which will check to see if clocking is initialized, and destroy it if it was.


function clockClear() {
if(clocking) { clearTimeout(clocking); clocking = 0; } //check for "clocking", and reset if it exists
}


The third function we must define is one that can be called upon the termination of the program (page unload) so that the data can be sent to the server. This function will assemble a URL with a query statement using the configuration variables, "URLtoScript" and "sendVar" along with the variable "scrollMax" which is holding the data for maximum vertically scrolled position. Then, using the assembled URL, it will open a popup window which issues a GET statement to your server, asking for the script that accepts the scroll data, and presenting the variable to it.


function postScroll() {
var postit = URLtoScript + "?" + sendVar + "=" + scrollMax; window.open(postit); //assemble and call URL
}


The fourth function is the primary function in this script. This is where all the work from above will finally come together. It is the function that is actually looped through for the program execution, so it starts out with the "clockClear" function. On the first execution of this program, "clockClear" doesn't really do anything, but after the function has been run through one time, "clocking" has been initialized, and this will clear it each time the function starts. Next, we compare the variable "scrollMax", which was initially set to zero (0), to the returned value of "getVPos" (which you'll remember is the current vertically scrolled position of the page). If "scrollMax" is less than the returned value of "getVPos", then scrollMax is reset to the value of "getVPos". This way, we are always keeping "scrollMax" set to the highest number of pixels that we have yet seen the page be vertically scrolled. Upon completing the comparison of the stored value to the actual value, the timer is set to re-enter the function after the set time has expired.


function updateMaxScroll() {
clockClear(); //reset clock
if(scrollMax < getVPos()) { scrollMax = getVPos(); } //compare scrollMax to current position and update scrollMax if necessary
clocking = setTimeout("updateMaxScroll()", cycleLength); //re-initialize clock and re-start cycle
}


Our final function is called to terminate the program. This is called during the "unload" of the page. This function, very simply, calls the "postScroll" function, which assembles and sends the data to the server, then ensures that the clock is cleared out.


function terminateScrollMonitor() {
postScroll(); clockClear();
}


To install this on a page, we would place all the code discussed above (made downloadable in a .js file along with this article) in the <HEAD> of an HTML page, or in a .js file which is linked in the <HEAD> of an HTMl page. We would then place some Javascript Event Handlers in our <BODY> tag that would call the right function for starting the program and ending the program at the right times. The proper <BODY> tag would like like:


<body onload="updateMaxScroll()" onunload="terminateScrollMonitor()">


Notice that the primary function is called during the load of the page and the termination function is called when the page is closed or the browser moves on to another document.

That is all the coding necessary on the client side. Again, you will need to have a script running on your server for this data to be reported to. And remember that this Javascript opens a new window, so you will want some javascript in your server side script that can be returned to the browser to immediately close the window.

Also, there are some hurdles you may encounter. The first is that if a user has Javascript turned off in their browser, this script won't do anything. There is nothing you can do about that. The second hurdle is that if the user has a popup-blocker employed on his browser, the reporting function will not be able to send the data. The popup-blocker can be avoided, however, by modifying the "postScroll" function to interact with a frame in your page rather than opening a new window. It's just a matter of re-coding a single function.

Some other fun things to play around with would be to do some comparisons between the scrolled position being reported by this script, and the actual display height of the current browser window. By doing some simple math with these, you can not only report how many pixels the top left corner of the browser is from the top of the document, but you can report how many pixels down the page was actually viewable. If you want to deploy this on multiple pages, use the HTTP Referer to determine which page is reporting a scroll distance. There are a lot of things you can do to modify or improve on this--play around-it's fun!

Download the JavaScript Scroll Monitor
Jim Auldridge is an active member of the Christian-web-masters.com forums. You can find him regularly helping people with their programming questions.