jQuery Scroll To Top Control

If your pages are long winded, it's a good idea to provide viewers with an easy way to quickly/ automatically scroll back to the top of the page. That's where this script comes in. It displays a stationary control at the lower right corner of the window that when clicked on gently scrolls the page back up to the top. And instead of always being visible on the user's screen, the script lets you specify how far down the page the user is at (in pixels) before revealing the control.

Scroll down (at least 100 pixels) and look in the lower right corner and you will see a little up arrow. Click on it and it will slowly take you back to the top of the page.

We have tested the code in IE 8.0, Firefox3.5.5, Opera 10.20, Netscape 9.0.0.6, Flock2.52 and Safari Public Beta 4(528.16). This script worked well in all platforms with no variations observed.

Note Of Importance: Before we begin, we feel we need to advise you that your page should contain a valid doctype at the very top in order for this script to work as intended. If this is a little unclear, see the below example of a valid document type that you can use at the top of your page before the opening <html> tag.



<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



<html> <!---------- OPENING HTML TAG

Depending on your knowledge of HTML and javascripts, this is an easy one (1) part copy and paste code that goes in the <HEAD> section of your document. It also makes use of two (2) an external.js files (jquery.min.js) and (scrolltopcontrol.js) scripts you need to save and upload the scrolltopcontrol.js into your directory and just copy and paste the jquery.min.js as is since it is an app from [ Google ]. The other thing you will need to do is upload an image that you can see (once you scroll at least 100 px) in the lower right corner of the page

Step One: You need to save the external.js file scrolltopcontrol.js and upload it into your directory.

Step Two: You need to add the sniplets of code into the <HEAD> section of your document to call the external files jquery.min.js and scrolltopcontrol.js you uploaded into your directory and are calling from an external source of Google.

Snipplet Of Code

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

<script type="text/javascript" src="scrolltopcontrol.js">

/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code

***********************************************/

</script>

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

Once you complete the above section, all you need to do is upload the up arrow graphic into your editor and possibly reconfigure the path of the image. The reconfigurations are made within the scrolltopcontrol.js file. On the site you get the code, they have a very good extensive tutorial on howto make all your other reconfigurations. See below where to reconfigure the image path if you do not upload the up.png into your root or top directory

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

If you have up loaded the up.png into a different directory, for example /images, then the path of the image would be changed to images/up.png. See below how it would appear within the code.

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="images/up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

You have been seeing more and more JavaScripts making use of the jQuery external.js file in their scripts. If you are wondering what it is and how it works, grab the below link and you will find out all you ever wanted to know about it from the source.
[ jQuery-A New Kind of Script Library ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]