jQuery Scroll To Top Function Snippet

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:

<section class="topSection">
        Top Section
</section>
<section class="bottomSection">
        Bottom Section
</section>
<!-- You will need to copy the following code for your implementation -->
<a href="#" id="scrollTop">^</a>

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.

.topSection, .bottomSection{
  background: white;
  height: 500px;
  display:flex;
  align-items: center;
  justify-content: center;
}

/* You need only the following css class for your project */
#scrollTop{
    opacity:1;
    width:30px;
    height:30px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-items: center;
    text-align: center;
    background-color: grey;
    position:fixed;
    bottom:5vh;
    right:5vh;
    transition:all 0.15s ease-out;
}

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.

var scrollAmountBeforeDisplay = 30;
var scrollTransitiontime = 1200;
var opacityTransitionTime = 150;


$(document).ready(function(e) {
    scrollTopFunction();
})


//1. Scroll to Top of the Page
function scrollTopFunction() {
    console.log($(window).scrollTop());
    if ($(window).scrollTop() < scrollAmountBeforeDisplay) {
        $('#scrollTop').fadeOut();
    }
    $(window).scroll(function() {
        //If scroll amount is sufficient to display
        if ($(this).scrollTop() > scrollAmountBeforeDisplay) {
            if ($('#scrollTop').css("opacity") == "0") {
                $('#scrollTop').css("display", "block");
                setTimeout(function() {
                    $('#scrollTop').css("opacity", "1");
                }, opacityTransitionTime);
            }
        }
        //If scroll amount is insufficient to display
        else {
            if ($('#scrollTop').css("opacity") !== "0") {
                $('#scrollTop').css("opacity", "0");
                setTimeout(function() {
                    $('#scrollTop').css("display", "none");
                }, opacityTransitionTime);
            }
        }
    });
    $('#scrollTop').bind("click", function(e) {
        e.preventDefault();
        window.location.hash = '';
        $('html, body').animate({
            scrollTop: 0
        }, scrollTransitiontime);
    });
}

Illustration on JSFiddle

Here is a JSFiddle to guide you along the way!

Open the live demo on JSFiddle

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