New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opera 7+

jQuery Scroll to Top Control v1.1

Author: Dynamic Drive

Note: April 7th, 09'. Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. Also fixes scroll animation not working in Opera.

Description: 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. Nifty!

Note that apart from displaying a stationary control, you can also define arbitrary anchor links on the page with a special href value (ie: #top) that when clicked activate the script and scrolls the page back to the top.

Demo: Scroll the page down (at least 100 pixels) to see a "Back to Top" control appear at the lower right of the window.


Directions: Developer's View

Step 1: Simply add the below script to the <HEAD> section of your page:

Select All

The above references a.js file plus a sample image: which you should download below (right click, and select "Save As"):

Important Note: Your page should contain a valid doctype at the very top in order for this script to work as intended.

You can customize a variety of things, such as the amount of time it takes the script to scroll back up to the top, duration of the fade in/out effect for the control, and the number of pixels the user's scrollbar should be from the top of the page before revealing the control. Inside the .js file, here is the relevant section to modify:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

For "controlHTML", you can enter any HTML you wish to be shown as the control, though it should be something simple, such as an <IMG>, or even just plain text. The setting "anchorkeyword" lets you enter the href value of HTML anchors on the page (if any) that should be parsed by the script and assigned the "scroll to top" behaviour to. With the above setting, the following HTML anchor on the page would also scroll the page back up to the top:

<a href="#top">Back to Top</a>

Back to Top

Changing the target destination of the "Scroll To Top" Control

By default when you click on the Scroll to Top Control, it scrolls the page back up to the very top. However, you can change that to say, 50 pixels from the very top of the page, or scroll to a specific element on the page instead, such as a header. The setting to change is "scrolltop" inside the .js file:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

Change 0 to either an integer (ie: 50), or the ID of the element you wish the control to scroll to, such as "myheader", where "myheader" is an element defined on the page:

<h2 id="myheader">Welcome to Dynamic Drive!</h2>

 

 

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.

Ignore the following, which is just some dummy text to stretch the height of the document. Ignore the following, which is just some dummy text to stretch the height of the document.