Description: This is a no fuss script for automatically scrolling the page back to the very top when invoked. For long pages, having a scroll to top link makes good usability sense, and with this script, it's dead simple to add one to your pages. The standonly script doesn't rely on any JS script library (such as jQuery), and as such, is as non convoluted and easy to integrate as can be!

See also: jQuery Scroll to Top Control and Scrolling HTML Bookmarks

Demo: Click on the [ Top ] link at the lower right corner of this page (or any page throughout DD).

---

Directions:

Simply insert the following script in the HEAD section of your page:

Select All
<script> /*********************************************** * Scroll to Top link- By Dynamic Drive (www.dynamicdrive.com) * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ function dd_scrolltotop(duration){ duration = duration || 500 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>

If you wish to add the above code inside a .js file instead, simply remove the surrounding <script></script> tags from it first.

Then, simply invoke the function dd_scrolltotop() to scroll a page to the very top. This can done most typically via a link, such as:

<a href="javascript:dd_scrolltotop()">Scroll to Top</a>

The default animation time to scroll to the top is 500 milliseconds; you can change this by passing an explicit parameter into the function when calling it, such as:

<a href="javascript:dd_scrolltotop(1000)">Scroll to Top (1 second animation)</a>

And that's all there is to it!