Go top button function

Posted under » JavaScript on 5 April 2011

Sometimes your page get's too long, like this page for eg. It is a good idea to have a "go to top" button. This is a javascript version. The script does this

A go to top button will magically appear at bottom right when the page is getting too long
upon pressing the up button, the page will elegantly move/scroll to the top of the page.

How to do it.

Put the following on your header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Also this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.anoneh.com/js/scrolltopcontrol.js"></script>

Where ajax.googleapis library can be any version you wish.

Perhaps you want to change the img url specified in "scrolltopcontrol.js". You don't have to do anything else. Just ensure your js and images folder are valid.

There are times where you just want to go up without pressing the up arrow. This is what you should put in your JS script.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;