jQuery scroll to top button

Today’s topic is,

jQuery scroll to top button

I’m gonna teach you create a simple jQuery scroll to top button example – which will allow you to scroll back to the top of your website with ease also with a small animation.

jQuery scroll to top button tutorial PepFry

jQuery scroll to top button

Normally, a website would contain much data to give them to its readers. It might contain Images as well. When there is an article or a story that is written – you can’t make a story written into 2 different pages because of the length. jQuery scroll to top button plays an important role here. If at all you web page is too lengthy – this plugin will bring in a UI button on the screen anywhere as you want and your readers can just click on that to go t the top of the web page.

For this tutorial, you’ll need HTML, CSS and jQuery plugin.

First, we’ll create the markup, as shown below:

As the next step, we’ll need to add Styles for the anchor as seen below


Next comes the scripting part that brings in our back to top button while the user scrolls your website downwards.


For the above script to work, you’ll need to add the jquery plugin as seen below:

Full code:


Once done, you must see the desired output as shown in the following screenshots:

 Before scrolling:

jQuery scroll to top button tutorial - PepFry

jQuery scroll to top button

After scrolling

jQuery scroll to top button tutorial - PepFry

jQuery scroll to top button

Once you scroll down – you’ll see a button animating and appearing on your screen’s bottom right corner. When you click on that button – It will take you to the top of your web page.

Hope this tutorial “jQuery scroll to top button” helped you! Thanks for going through the entire tutorial.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">