In this article you learn how to use Java Script to determine how far a user scrolled your webpage before leaving, and how to log this data on the server with an example using ASP.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How Far Did the User Scroll?

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.

<table width=500><tr><td>
<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.

<script language="JavaScript">
function LogLeave()
  var par;
  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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268