Inside Technique : Scroll Tricks
By Scott Isaacs

This article explores how to take advantage of the Internet Explorer 4.0 scroll properties through two simple examples. The first example creates adds a "Top of Page" link to any page that is larger than one screen of information. The second example extends the first by displaying the "Top of Page" link in the lower-right corner of the screen whenever the user is not at the top of the document. In addition, both of these demonstrations work well with other browsers by always displaying the link at the bottom of the document.

Before we begin the demonstrations, let's review the properties we will be using. Internet Explorer 4.0 supports a number of properties for determining the scrollbar position, document size, window size, and client area size in pixels. All of these properties are exposed on the document's body property. Below is a table explaining all the properties for each category:

scrollTop	The number of pixels the vertical scrollbar is from the top of the client area.
scrollLeft	The number of pixels the horizontal scrollbar is from the left of the client area.
scrollWidth	The width of the document's content.
scrollHeight	The hieght of the document's content.
clientWidth	The width of the client area of the document. This is the width of the viewable area less the scrollbars.
clientHeight	The height of the client area of the document. This is the height of the viewable area less the scrollbars.
offsetWidth	The width of the window containing the document. This includes the scrollbars.
offsetHeight	The height of the window containing the document. This includes the scrollbars.

These properties are avialable once the body element of the page has been parsed. Once the BODY element has been encountered, these properties become available. The scrollWidth and scrollHeight properties always reflect the document's size and may change as the document loads or if any part of the document is modified using Dynamic HTML.

On the next page, we start with a simple demonstration that adds a "Top of Page" link to documents as needed.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.