Click for Navigation / Klicken Sie hier zur Navigation:
1. Preparatory work< | 2. <BODY> clause | 3. JavaScript Function |

Controlled Scrolling:

Reading on Screen just like in a Book

(IE only)


To most people, reading from screen is still "something different" than reading in a book. One reason is that on screen it's not so easy to position a text comfortably for reading. With a simple JavaScript function you can provide that comfort to your readers.

A major difference between reading a book from paper and reading a text from screen (= online communication) is that you can flip through a book virtually without any thinking:

  • You flip a page, and the next page is always just there where you expected it.

    o No matter how the book was lying before,
    o no matter how far down you read on the previous page
    => after flipping, the next section will start right on top of the next page.

  • Whereas on screen it always takes some carefulness.

    o If you scrolled down a bit before you press the scroll key,
    o the next section will start somewhere in the middle of the screen.
    o On the next pressing of scroll key it will be even worse.
    => Soon you will feel as having lost control.

There is, however, a fairly simple way to avoid that. A JavaScript function handling the scrolling when a reader presses a key. Such that in any case the next section will be positioned at top of the screen, whatever the previous position was. This can be achieved by a three-step method:
  1. Preparatory work:
    • Each section should be smaller than one screen.
    • Each section should have a meaningful title.
    • Title should be introduced by a (numeric) Bookmark.
    • Sections should be separated by sufficient whitespace.
    • Give a hint to the reader: "previous: Ctrl+PgUp - key next: Ctrl+PgDn - key"
  2. Extra clause in the <BODY> tag of the document
  3. Declaring a special JavaScript function.

next    top

































1. Preparatory work

  • Before you begin writing, breakdown the subject to sections that can be presented within one screen. (Compare article: Online Communication: Unlike Writing on Paper!).

    If subsequently an additional idea occurs to you that would extend that section significantly beyond one screen, a new breakdown is needed (with sub-sections, or a new section altogether).
    Obviously, in times of mobile computing that's a rather vague rule of thumb. You have no control over the screen size of your readers' computers.

    So, generally said, a section should be written as concise as possible. (Compare article: Online Communication: Unlike Writing on Paper!).

  • Each section should have its own title, written in a distinctive lettering. A title should be meaningful (Compare article: Online Communication: Unlike Writing on Paper!).

  • Each title should be given a bookmark. To make the JavaScript function simpler, such bookmarks should be limited to numbers ( 1  ,  2 , … )

  • If for any reason you need additional bookmarks in the middle of a section, be sure to use non-numeric labels (e.g.  1a  ,  2b , … )

  • Between the end of a section and the next section title, insert sufficient whitespace to push the next section out of screen.
    You can do that easily for example by a line  <br> <br> <br> … <br> 

  • It will help your readers to remind them at the end of each section how they can go directly to the previous/next section (e.g. by a line : " previous: Ctrl+PgUp-key next: Ctrl+PgDn - key" )

next    top

































2. <BODY> clause

Scrolling will be controlled by a JavaScript function. In order to activate it, you should insert in your document's tag the following attribute:

onkeydown="PrevNextBookmark()"


previous    next    top

































3. JavaScript Function

When the reader presses a certain key combination, all the numeric bookmarks are scanned up to the first one whose location is beyond the current screen scrolling.

An object's location is represented by its  offsetTop  property, the current window scrolling by  document.body.scrollTop .
Key combinations useful for controlled scrolling are  Ctrl+PgUp  (key code 33) and  Ctrl+PgDn  (key code 34).

The JavaScript function controlling the scrolling would look as follows:


function PrevNextBookmark()
{
  if (event.keyCode == 33 && event.ctrlKey)  // Ctrl+PgUp-key?
  {
   var latest_obj;

   for (i=0; obj = document.all(i);  i++)
   if (obj.tagName=="A" && obj.name.length && !isNaN(obj.name))
     if (obj.offsetTop < document.body.scrollTop)  latest_obj = obj;  
                                             else  break;
   if (latest_obj)                           // if 'latest_obj' defined ...
     window.location = '#' + latest_obj.name;// ... scroll to prev. bookmark
  }

  if (event.keyCode == 34 && event.ctrlKey)  // Ctrl+PgDn-key?
  {
   for (i=0; obj = document.all(i);  i++)
   if (obj.tagName=="A" && obj.name.length && !isNaN(obj.name))
     if (obj.offsetTop > document.body.scrollTop)  break;
   if (obj)                                  // if loop aborted ...
      window.location = '#' + obj.name;	     // ... scroll to next bookmark
  }
}

If you want to get a look-and-feel how this method would be, look more closely at the article you are currently reading. It is written by this method of 'controlled scrolling', just as all the other articles on "Online Communication". You can try it in real life, if your browser is IE.

previous    top