Scroll Assist for Long Web Pages

For long pages, a clickable icon to scroll to the top of the page can be a friendly assist. Especially if the icon is visible only when the person needs it.

Having the icon visible only when the user is likely to need it makes it less intrusive and more user-friendly than an ever-present icon would be.

How it Works for the User

When it's visible, the icon is an up-arrow image in a circle floating vertically-centered at the right edge of the browser window.

The clickable icon is visible only when both of these conditions exist:

1. The user is scrolled down for two or more browser window heights.

   This feature keeps the icon out of the user's way unless they are quite a way down the page. It also prevents the icon from appearing at all on short pages.

2. The user starts to scroll up.

   This feature keeps the icon out of the user's way until it's fairly certain they want to scroll upward. Then, clicking the icon to scroll all the way to the top is an option.

This article page contains a demonstration (the clickable icon is visible on the right side of the browser window when the above two conditions both exist). Another demonstration is at the Lightfocus Butterfly Collage page.

How to Implement Scroll Assist

Scroll Assist has two parts, the Scroll Assist div with the clickable icon and the JavaScript.

You may copy the icon image used on this page for the demonstration. Please download the image and put it on your server instead of pulling it from ours.

The source code for the two Scroll Assist parts can both be pasted near the bottom of the content page. The functionality doesn't kick in until the page has fully loaded.

Part 1: The Scroll Assist Div With the Clickable Icon

Here is the Scroll Assist div with the clickable icon. Notes follow.

<div 
   id="scroll-assist-image-container" 
   style="display:none; position:fixed; right:1em; bottom:336px;">
   <a href="javascript:window.scrollTo(0,0);">
      <img 
         src="https://www.willmaster.com/library/images/to-top-arrow.png" 
         style="width:50px; height:50px; border:none; outline:none;" 
         alt="scroll-to-top image"
      >
   </a>
</div>

If you decide to change the Scroll Assist div id value scroll-assist-image-container to something different, a corresponding edit needs to be done in the JavaScript. (Info follows the JavaScript source code further below.)

Note the green colored CSS declaration right:1em; for the div. It regulates the distance from the right edge that the scroll assist image floats on the page. Optionally, the value may be changed.

Leave the rest of the div's CSS declaration as they are. But you may add other CSS declarations.

If you'll be doing more than just testing, then before going live please replace the img tag's src value

https://www.willmaster.com/library/images/to-top-arrow.png

with the URL of an image on your server. (You are welcome to download the icon image used in the demonstration.)

Note that the value of the Scroll Assist div's bottom:336px; CSS declaration is adjusted by the JavaScript to vertically center the scroll assist image.

Paste the Scroll Assist div code into your web page below all visible content. A good place is immediately above the </body> tag.

Note: The reason for pasting the Scroll Assist div code below all visible content is so the clickable icon floats above everything else. Otherwise, it may be under images or other content.

If you must paste the Scroll Assist div code further up the page, give it a z-index:9999; CSS definition to make it ride on top of other content. Example:

style="z-index:9999; display:none; position:fixed; right:1em; 

Part 2: The JavaScript

Here is the JavaScript for the Scroll Assist functionality. Customization may be required if the Scroll Assist div was customized. Notes follow.

<script>
/* 
   Scroll Assist
   Version 1.0
   March 24, 2017

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2017 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

/* Customization */
/* Provide the id value of the div containing the scroll-assist image */

var SA_ScrollToTopImageDivID = "scroll-assist-image-container";

/* End of customization*/

var SA_NoScrollAssistDistance = 1000;
var SA_PreviousScrollPosition = 0;
var SA_ThisScrollPosition = 0;
var SA_ScrollToTopImageDivThis = document.getElementById(SA_ScrollToTopImageDivID);

/*
function PowerhouseShowHide() obtained from
https://www.willmaster.com/library/tools/powerhouse-javascript-function-for-showhide.php
*/
function PowerhouseShowHide()
{
   // Will Bontrager Software LLC - https://www.willmaster.com/
   if( ! arguments.length ) { return; }
   for(var i=0; i< arguments.length; i++)
   {
      var ta = arguments[i].split("=",2);
      document.getElementById(ta[0]).style.display = ta[1];
   }
} // function PowerhouseShowHide()


function SA_DetermineScrollAssistanceImageVerticalPosition()
{
   var i = 
      Math.max( 
         (self.innerHeight?self.innerHeight:0), 
         (document.documentElement.clientHeight?document.documentElement.clientHeight:0) 
      );
   SA_NoScrollAssistDistance = parseInt(i*1.5);
   SA_ScrollToTopImageDivThis.style.bottom = parseInt(i/2) + "px";
} // function SA_DetermineScrollAssistanceImageVerticalPosition()

function SA_HandleScrollAssistance()
{
   SA_ThisScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
   var prevpos = SA_PreviousScrollPosition;
   SA_PreviousScrollPosition = SA_ThisScrollPosition;
   if( SA_ThisScrollPosition < SA_NoScrollAssistDistance || SA_ThisScrollPosition > prevpos )
   { 
      SA_ScrollToTopImageDivThis.style.display = "none"; 
      return;
   }
   if( SA_ThisScrollPosition < prevpos ) { SA_ScrollToTopImageDivThis.style.display = "block"; }
} // function SA_HandleScrollAssistance()

var SA_AddEventHandler = function(element,eventType,functionRef)
{
    if( element == null || typeof(element) == 'undefined' ) { return; }
    if( element.addEventListener ) { element.addEventListener(eventType,functionRef,false); }
    else if( element.attachEvent ) { element.attachEvent("on"+eventType,functionRef); }
    else { element["on"+eventType] = functionRef; }
}; // var SA_AddEventHandler

SA_AddEventHandler(window,"scroll",SA_HandleScrollAssistance);
SA_AddEventHandler(window,"resize",SA_DetermineScrollAssistanceImageVerticalPosition);
SA_DetermineScrollAssistanceImageVerticalPosition();
</script>

If you used the id value scroll-assist-image-container in the Scroll Assist div source code further above, then no edits are required.

But if the id value was changed, a corresponding change needs to be made in the JavaScript. At about line 24 you'll see a var SA_ScrollToTopImageDivID variable name with the scroll-assist-image-container value. Change the value so it matches what you've assigned to the Scroll Assist div.

That's the only customization that would need to be done.

Copy the JavaScript and paste it into your web page source code. It can be pasted into any location on the page. A good place is near the bottom of the page somewhere above the </body> tag.

The JavaScript may also be pulled in from an external file.

(This article first appeared in Possibilities ezine.)

Will Bontrager