Scroll to Top -smoothly

Description

This script will scroll a page smoothly to the top at the click of button. A button that you will want to place near the bottom of the page.

Scroll to the bottom of this page for the demo.

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

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() function as follows:

setupScroll_top("my_Scroll_top_btn");

Further Notes

Dependencies

This Scroll_top.js script uses another script T{} which is included at the top of the Scroll_top.js and Scroll_top.min.js files.

You should not include T{} more than once. If you are already using T{} for any other scripts, then delete it from all scripts and paste in once. Also, make sure to paste it at the top, before all scripts that use it. When deleting look for the line "var T=new function(){...". at the top of the file. For example, in this here Scroll_top.js file, you will see "var T=new function(){..." at the top. That is the line you will want to delete. It is a long line of minified code by the way.

Best Practice

Scroll_top.js & Scroll_top.min.js download links are of a small file size. The code is just a few lines. And so to reduce the number of file gets() your web page requires, I would advise you to just copy-paste the code in with the rest of your JavaScript.

Scroll Speed

The scroll speed is hard coded. It is set to 175. That is the number of px the scroll position is decremented per jump until it reaches less than zero and you are at the top of the page. If you wanted to change the speed simply find the variable "decrement" and change the 175 value it assigned. I must warn you, you might end up wasting a lot of time watching the page scrolling a little faster or slower. I certainly did. I think 175px is a good enough speed for long and extra long pages.

Minification

The minified script was minified using the closure compiler with the "Optimization:" level set to (O)Whitespace only and all options for formatting unchecked, which is the defaults config.

github

This page and all it contents are also posted at the following github link: github.com/nadeemelahi/scroll_top.

License

gpl v3

Free for personal or business use.
Source code is included -no obfuscation.
Not for re-sale.

DEMO

Click the button below and notice the automatic smooth scrolling to the top of the page.