How Far Did the User Scroll?
By Stephen Bucaro
From a reader; "I'm trying to find code snippet I can add to html pages so I can tell
how far a reader scrolled down in a sales letter before bailing and have that info show
up in a log or other file that is easy to get to. That way I know where people lose
interest in a sales letter or article so it can be changed to be more effective."
Let's see what we have in our Java Script bag of tricks. The html <BODY> tag has a
property, scrollTop that gives you the upper-left corner pixel location of the users
browser window. Along with the <BODY> tag properties clientHeight and
clientWidth this can give you the location of the pixel in the lower-right corner
of the users browser window, as shown below.
var st = document.body.scrollTop +
(document.body.clientHeight * document.body.clientWidth);
But because of the flowing layout nature of a webpage, this value is of limited practical
use. The problem is that the user can change the size and shape of their browser window.
As the user adjusts the shape of their browser window, the text, images, and other elements
rearrange themselves as they flow into position on the webpage.
Text has a property called line-height that relates to the amount of white space
between the lines. If the user shapes their browser into a thin tall column, it's possible
that each word of text contributes line height area to the browser window. If the user
shapes their browser into a thin wide shape, it's possible that the text might be arranged
as a single line, reducing the area used for line height in the browser window.
The only practical way to determine how much of a webpage the user actually viewed requires
that the webpage's dimensions be locked. A webpage's dimensions can be locked by placing it's
contents within a table and specifying the tables Width attribute. Or by placing it's
contents within a div or span and using style rules to specify it's width. An example of
webpage contents within a fixed width table is shown below.
<p><font size=3>Amendment 7</p>
<p><font size=2>In suits at common law, where the value in
controversy shall exceed twenty dollars, the right of trial
by jury shall be preserved, and no fact tried by a jury
shall be otherwise re-examined in any court of the United
States than according to the rules of the common law.</p>
<p><font size=3>Amendment 8</p>
<p><font size=2>Excessive bail shall not be required, nor
excessive fines imposed, nor cruel and unusual punishments
<p><font size=3>Amendment 9</p>
<p><font size=2>The enumeration in the constitution of
certain rights shall not be construed to deny or disparage
others retained by the people.</p>
<p><font size=3>Amendment 10</p>
<p><font size=2>The powers not delegated to the United
States by the Constitution, nor prohibited by it to the
States, are reserved to the States respectively, or to the
•The table width attribute specifies the MINIMUM width. If you place something
larger than the with in the table, the table width will increase to accommodate that object.
Another contributer to the problem is that different browsers have different
default margin sizes. You must assign specific margins in the <BODY> tag.
The example below sets the margins to zero.
<body topmargin=0 leftmargin=0 rightmargin=0
In the line above, the onUnload event of the body tag calls a Java Script
function named LogLeave. The code for the LogLeave function is shown below.
var loc = document.body.scrollTop +
(500 * document.body.clientHeight);
if(loc < 42428) par = 0;
else if(loc > 42428 && loc < 85621) par = 1;
else if(loc > 85621 && loc < 129214) par = 2;
else if(loc > 129214 && loc < 172858) par = 3;
else if(loc > 172858) par = 4;
This Java Script code block should be placed in the <HEAD> section of the
webpage. In the code, the value Loc is calculated by multiplying the table's
width (500 pixels) by the height of the webpage, and then adding the pixel value
at the upper-left corner of the browser window. It then uses an if/else if
structure to test for end-of-paragraph pixel locations to determine which
paragraph was visible when the user left the page.