Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Back to top button

Like & share to be notified of the new tips & tutorials:

In this tutorial, we utilize javascript(jQuery) in order to show a back to top navigation button to be visible after user scrolls down to some extent. This is a valuable UX(user experience) element to ease the navigation in your single page websites.


We have created a couple of sections to be put in the body so that we have some space to scroll. At the end we have added a div with class top which wraps around an i element. We have included ionicons to be used for the class of our icon.


We need to style our sections to give them some heights

and then most importantly the button that lets us go to the top of the page

As you can see, we set the position of the button to be fixed so that regardless of the scrolling of the page, it stays put at the position we defined using right and left styles.
We also set the visibility to hidden so that it doesn’t show up when the page loads but then we will reveal it using javascript(next section) when the user scrolls down.


What we need here is that we first load the javascript library by putting it’s address in our head section.
Then we use jQuery scroll function and check if the the top of the window(visible page area) after scrolling has passed 250px and then we set the visibility style to visible and we alternate to hidden when it is less than 250px.
Finally we add the jQuery animate function in the click handler to set the scrollTop property to 0 which means the exact top of the page. we pass 1000(1s) as the secone parameter to animate function so that it we have a good animation there.

Let me know if you have any questions and feedbacks and don’t forget to check the demo and download the code to get a better idea of how things are done.