A simple animated scroll "Go to Top" javascript with no dependencies within only 862 Bytes (517 Bytes gziped) to do the trick.
Just add the script before your last </body>
tag and a link with an ID "gotop" into your page:
<a href="#top" title=" Go to Top " id="gotop">↑ <span>Top</span></a>
That's all! You can specify an anchor as a target for fallback (if javascript is disabled).
The first strings into the script allow you to set some variables which govern the behaviours:
showme
: Set to1
to show the link on page load or set to0
to hidde it on page loaddistance
: The distance in pixels from the bottom of the HTML document when the go top link appears. Default:300
fromTop
: Set to1
for the link's revelation based on thedistance
value from the top of the document, set to0
for opposite.link
: The ID name associated to your link. Default:'gotop'
adjust
: Allows to correct the final position in pixels to the top of the HTML document on the scrolling animation (if needed: due to extra spaces (personal bookmarks, extensions, etc.) into the browsers window. Despite the script evaluate this behavior, consider this as a fallback for old browsers). Default:100
Automatic detection of "smooth-scroll" property for modern browsers; fallback to internal animation for all others browsers.
See the demo.html
file for example.
See it in action here: https://jsfiddle.net/f987rqgw/
Despite the anchor target as a fallback, tested successfuly within:
- Google Chromium 1 and up;
- FireFox 1.0.8 and up;
- Safari;
- Opera 0.8 and up;
- Midori 0.4 and up;
- Netscape Navigator 7.1;
- Internet Explorer all versions.