jQuery Scroll to Top Control v1.1
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:
Step 1: Simply add the below script to the <HEAD> section of your page:
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>
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.