EverWeb Codebox

Smooth Scroll To The Top

The Easy Button at the bottom of this page will take you to a widget to create this feature. The code is presented here to allow you to create your own styles with extra design elements.

The smooth scroll to the top button at the bottom of all the pages on this site uses a small javascript rather than a framework like jQuery or Mootools. These are required for smooth scrolling anchors but, for a more sophisticated back to the top function, this method does the job with a lot less code.

You can simply paste this javascript into the site wide Footer Code box if you require the function on every page of the site...

Javascript

<script type="text/javascript">

function dd_scrolltotop(duration){

     duration = duration || 1500

     var rootel = (document.compatMode =="BackCompat")? document.body : document.documentElement

     if (rootel.scrollTop == 0) // in some browsers such as Chrome, use document.body instead of document.documentElement

          rootel = document.body

     var curscrolltop = rootel.scrollTop, scrolltimer, elapsedtime, starttime = new Date().getTime(), animatedegree = 0

     var totaldis = curscrolltop

     clearTimeout(scrolltimer)

     function jumptop(){

          elapsedtime = new Date().getTime() - starttime

          if (elapsedtime < duration){

               rootel.scrollTop = totaldis - (totaldis * (1-Math.cos((elapsedtime/duration)*Math.PI)) / 2)

               scrolltimer = setTimeout(function(){jumptop()}, 10)

          }

     }

     jumptop()

}

</script>

To help reduce the amount of code in the page HTML doc, this website uses a separate script referenced in the site wide Footer Code box like this...

HTML

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/smoothScrollTop.js"></script>

This is the HTML to paste into a Snippet...

<a class="top" href="javascript:dd_scrolltotop()">Back to the Top</a>

Note that the anchor has a class "top". This allows the button to be styled. The CSS used to create the button on this page is shown below with comments so that you can create your own design.

CSS

<style type="text/css">

a.top {

     font: 15px 'Verdana', helvetica, sans-serif; /* Font size, type and fallback */

     color: #157FFF; /* Font color */

     text-decoration: none; /* Removes the underline */

     margin: 0;

     padding: 5px; /* Pads the text inside the block element  */

     background: #444; /* Button background color */

     position: relative;

     display: block; /* Creates a block element */

     width: 150px; /* Alter the width to suit the amount of text */

     text-align: center; /* Centers the text in the block */

     border: 2px solid #555; /* Border width, type and color. Replace with - border:none; - if required */

     border-radius: 5px; /* Button border radius generic */

     -moz-border-radius: 5px; /* Firefox and Opera border radius */

     -webkit-border-radius: 5px; /* Safari and Chrome border radius */

}

a:hover.top {

     color: #FF0000} /* Button text rollover color */

</style>

Paste the above code into the site wide Header Code box.

If you want simple, click the Easy Button to find out about a widget that will do it for you.

Easy