Floating 'Scroll to Top of Page' Link

Learn how to implement a floating up-arrow image that floats on the right side of a web page. Clicking on it scrolls the page to the top.

It's a reader-friendly offer to click or tap and return to the top of the page without doing a lot of manual scrolling.

This page is a live demonstration. Scroll down at least 2 inches (about 5 centimeters) and you'll see an up-arrow image on the right side of the browser window. The image is about 2 inches from the top edge of the window. Click on it and the web page will scroll to the top.

A friend and business acquaintance asked how to to do that. My first thought was that this is a perfect candidate for the Possibilities ezine's "Good to know techbit" section.

But no, that wouldn't do.

It's easy enough to make a floating image that, when clicked, scrolls the page to the top. But there are other things to consider that would have made the "Good to know techbit" section way oversized.

• It isn't professional to have the up-arrow image visible when the web page is already scrolled to the top. A scroll-position detector is warranted.

• The site owner should be able to specify how far the web page is to be scrolled before the image becomes visible.

• The up-arrow image should be out of the way of content. If it's impossible to put the image outside margin of the content, then it should be at least partially transparent to assure the reader that there is indeed content below the image.

• Some browsers require different JavaScript for scrolling to the top than other browsers do.

The live demonstration and the source code use an image from the Willmaster.com server. You're welcome to download the image to your server for your own use.

Implementing the Floating 'Scroll to Top of Page' Link

Implementation is in two parts, HTML and JavaScript. Optionally, the two parts may be published together in the source code of your web page.

Here's the HTML. (Notes follow.)

<div 
   id="click-to-scroll-up" 
   onclick="ScrollUp()" 
   style="
      display:none;
      position:fixed;
      right:3pt;
      top:144pt;
      background-color:transparent;
      border:3px solid #999;
      border-radius:50% 50%;
      width:27pt;
      height:27pt;
      text-align:center;
      cursor:pointer;">
<img 
   src="//www.willmaster.com/library/images/ArrowScrollUp.png" 
   style="width:auto; height:24pt; border:none; outline:none;" 
   name="Click or tap to scroll to the top" 
   alt="Click-to-scroll-up Image">
</div>

The above HTML is a div that contains an image. Each attribute is required. The style attribute has optional CSS declarations.

Notes:

• The id="click-to-scroll-up" attribute is how the JavaScript knows which div to display and undisplay. The id's value, colored red, may be changed if the corresponding value in the JavaScript is also changed.

• The onclick="ScrollUp()" attribute causes the JavaScript to run and scroll the page to the top when the div or its image is clicked.

• Four of the CSS declarations in the onclick="..." attribute's are required. They're the display and position-related declarations, colored blue. The rest, keep or change as you please.

The image in the div can be whatever image you desire.

The HTML source code can be anywhere on the page below the content — below the content so the content doesn't cover the div with the up-arrow image.

Here's the JavaScript. (Notes follow.)

<script type="text/javascript">
/* 
Floating 'Scroll to Top of Page' Link Handler
Version 1.0
November 28, 2015
   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2015 Will Bontrager Software LLC
This software is provided "AS IS," without any warranty of any kind.
*/

// Customization section is next two lines.
var ClickToScrollUpDivID = "click-to-scroll-up";
var ProvideScrollUpLinkPixelDistance = 175;
// End of customization section.

function ScrollUp()
{
   if( document.body && document.body.scrollTop ) { document.body.scrollTop = 0; }
   var scrollpos = GetScrollPosition();
   if( scrollpos > 0 && document.documentElement && document.documentElement.scrollTop ) { document.documentElement.scrollTop = 0; }
   document.getElementById(ClickToScrollUpDivID).style.display = "none";
} // function ScrollUp()

function GetScrollPosition()
{
   var scrollpos = 0;
   if( document.body && document.body.scrollTop ) { scrollpos = document.body.scrollTop; }
   if( scrollpos == 0 && document.documentElement && document.documentElement.scrollTop ) { scrollpos = document.documentElement.scrollTop; }
   return scrollpos;
} // function ScrollTestForImage()

function ScrollTestForImage()
{
   var scrollpos = GetScrollPosition();
   if( scrollpos > ProvideScrollUpLinkPixelDistance ) { document.getElementById(ClickToScrollUpDivID).style.display = "block"; }
   else { document.getElementById(ClickToScrollUpDivID).style.display = "none"; }
} // function ScrollTestForImage()

var 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; }
};

addEventHandler( window, "scroll", ScrollTestForImage );
</script>

Notes:

• The value of the ClickToScrollUpDivID variable, colored red, needs to match the id of the div with the up-arrow image.

• The value of the ProvideScrollUpLinkPixelDistance variable, colored blue, specifies the minimum number of pixels from the top before the div with the up-arrow image is displayed.

The JavaScript can be anywhere in the web page source code.

As an option, the HTML and the JavaScript may be published at the bottom of the page immediately above the </body> tag in the source code.

At this point, you're scrolled down way far enough to cause the display of the demonstration up-arrow image in its div (marked with a circular border). Click on it to scroll to the top of the page.

(This article first appeared in Possibilities ezine.)

Will Bontrager