Menu

Category

jQuery Scroll To Top Function Snippet

November 22, 2019
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">Scroll</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: #ccc;
  height: 500px;
  display:flex;
  align-items: center;
  justify-content: center;
}

/* You need only the following css class for your project */
#scrollTop{
    opacity:0;
    display:none;
    width:30px;
    height:30px;
    position:fixed;
    bottom:5vh;
    right:5vh;
    text-indent:-1000vw;
    background-image:url(https://www.aritsltd.com/img/angle-up.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-color:rgba(0,0,0,0);
    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!

Tags:
Fahim Hossain

Fahim Hossain

With the booming pace of the tech industry, there is a lot to grasp, learn and master. My passion is to work with different architectural design patterns and developing high performance software solutions using the latest technology stacks. I am the founder of ARITS Limited and am currently serving as its Chief Executive Officer

3 on “jQuery Scroll To Top Function Snippet

Fahim Hossain
Fahim Hossain

You should be able to use any background image without any problem. If you provide a code snippet then I will be able to help you better

Reply
Zdzisław

The solution is interesting and I would like to use it on a non for profit websit, but I can’t use my own .svg or .jpg file as background-image in .css
Why?

Reply
Maher Khan

Hello Fahim, nice piece!

Reply

Leave a Reply

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

Scroll
Advancing Through Technology
Ground Floor • House 375 • Lane 6W
Baridhara DOHS • Dhaka • 1206 • Bangladesh
Email : contact@aritsltd.com
Call: ‭+880 19 0519 9835
Automation • Robotics • Information • Technology • Solutions
© 2019 ARITS Limited • Advancing Through Technology
All rights reserved.