A scroll to top script

Scroll to Top - smoothly

Description

This script offers a convenient footer button for very long web pages that when activated will automatically and quickly scroll up to the top of the page automatically. The DOM includes a window.scrollTop and window.scrollTo() property and method respectively. This script tracks your current scroll position, sets animation rate, and scrolls smoothly to the top. This script will scroll a page smoothly to the top with a click of a button.

Disclaimer

We do not recommend this tool but it is here for those who need it. As a guiding principle of web design it is poor form to make your pages too long. Keep your pages at a reasonable length or even short. Do not make your pages too long instead use multiple pages. As a user, I try to avoid long pages especially infinite pages.

Audience

You are a web designer who knows how to integrate a plugin into a web page; namely you know html, css and javascript.

Dependencies

This scripts requires the T{ } raf animation tool. It is included. You only ever need to include T{ } once in any web app. If you are using this scroll-top tool with other animation tools that also include T{ }, then you should delete T{ } from this file.

Usage

Include the Scroll_top.js script in your page. Set an id on the dom element you want to be your scroll to the top button. And pass that id to the setupScroll_top() function.

For example, if in your html you have a button element with an id as follows:

<button id="my_Scroll_top_btn">

Then in your JavaScript you would pass that id as string to the setupScroll_top("my_Scroll_top_btn") function as follows:

Notice it scrolls fairly quickly. That is ideal. If you want to adjust the speed, edit the "decrement" property.

setupScroll_top("my_Scroll_top_btn");

Demo

js file link: ./Scroll_top.js

Final Notes

This script works on all modern browsers including IE9 and above.