First let’s look at how this function was originally done. In the old days (and even now) the practice was to create an html link on top of the page in the body section, and create another link on the bottom of the body and link both the links (I know, there’s no other way of saying link without saying link again) together. What we are making today is the exact same thing, but we are going to enhance it visually.
There are no codes on this page. You can download or view the entire back To Top codes from here. It’s a plain text file, and it makes it easier for you to follow along. Every step is marked with explanation.
Due to popular demand (I always wanted to use this phrase :P) You can download the version with “fade-out effect” from here.. Instructions are included.
To see it in action, click here.
Step 1. Now let’s get started. Open your header document and insert the jQuery library either hosted locally or from Google (recommended for a million reason) in the head section.
If you are already using the jQuery library for some other features skip the above section as the jQuery library is already loaded in your documents. Look for the above codes or something similar that references the jQuery library.
Step 2. Now let’s paste our script. It can go anywhere but let’s keep everything organized. Paste it above the head section.
Step 3. Now in the same header document, insert this code on the very first line in the body section:
Step 4. Open your main document and put this code where ever you want your link or button to appear, usually at the bottom somewhere:
Step 5. Now let’s style it a bit. We are going to make it center in the page, and change the link color.
That’s it. You have a functioning “Back To Top” link. If you want to get even fancier, you can make it a button like the one on this site. Just follow the same process but instead of using a plain link, use an image. The possibilities on styling this feature are endless, so mess around with it until you are happy. Make a comment if you like it or if you have any questions.