On long pages it is often quite nice to provide the user with a button or link to scroll back to the top of the page with a single click.
It is possible to use simple javascript to accomplish this.
However, in this example I would like to animate the scroll so we will be using jQuery.
STEP 1
We first create a simple HTML template and include the link to jQuery:
STEP 2
We can now add some content to the body section.
I have just used some Lorem Ipsum text but, obviously, you can use anything you wish.
For simplicity, I have edited out many of the lorem text lines and only left a few.
Depending on your code editor you may be able to add lorem text with a simple command like: lorem*20
STEP 3
We can now add a button to take us to the top of the page.
My button has an id of 'toTop'. We will use this id in the jQuery.
Step 4
We can now add the jQuery code:
Line 8: this will ensure the page has loaded and is ready before executing any code.
Line 9: if the #toTop id element has been clicked then we perform a function (line 10 in this case).
Line 10: we target the html and body elements and animate to the top using a slow scroll. The reason we need to use html AND body is that different browsers require different rules.
