This tutorial demonstrates how to implement a simple scroll to top function with transition effect using jQuery.

Step 1: Simple HTML Page

For the purpose of this tutorial, we will add the following HTML Markup within the body of the HTML page:

Please note, that we have added a simple anchor element(to act as the scroll to top button) at the bottom of the aforementioned snippet.

Step 2: Add Related CSS

Now lets add some CSS mark up to the page and our "scrollTop" element.

Step 3: Adding the following code in your custom JS File

Firstly, please make sure you have imported the jQuery library onto your html file. Then, add the following function in your custom js file.

Illustration on JSFiddle

Here is a JSFiddle to guide you along the way!

Need this inside a real product? ARITS does web application development.

Have a project you want built right?

Tell us the scope and your deadline. You will get a straight read on what it takes to build, and what it will cost, from a team that has shipped 400+ projects out of Dhaka and London.

More case studies

Modular blocks assembling into one object, illustrating the Builder design pattern

Frontend Development

Everything You Need to Know About Builder Design Pattern

The Builder pattern, explained: how it untangles messy object construction, when it's worth using, and a clean implementation you can adapt for your own code.

Frontend Development

jQuery Scroll To Top Function Snippet

This tutorial demonstrates how to implement a simple scroll to top function with transition effect using jQuery.

Backend Development

Forms in Angular (Part-1)

Forms are one of the most crucial part of any web application. A form can be as simple as taking only one text input from the user and process the user information provided. But in real world applications, this is often not the case. A lot of times forms get pretty complex. Thankfully Angular provides us with tools to make our lives easy for creating, validating and handling behaviors of the form.