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


FF1+ IE7+ Opr9+

Scroll to Top link

Author: Dynamic Drive

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 green "orb" image at the lower right corner of this page (or any page throughout DD).


Directions: Developer's View

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

Select All

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!