Create Scroll Back to Top Button using jQuery and CSS

The Back to Top button allows the user to smoothly scroll back to the top of the page. It’s very useful to enhance the user experience of the website. When a web page has lots of content, this page needs a navigation option that takes the user to the top with a single click without much scrolling.

In this tutorial, we will show you how to create a Back To Top button using jQuery and CSS. This Back to Top button enhances the navigation experience of your website with long pages. After the browser window has been scrolling down, a button will automatically appear on the right-bottom corner of the content area. Once this button is clicked, the page will be automatically scrolling up. Through this button, the user can back to the top section from the bottom section of the web page without manual page scrolling. So, the Back-To-Top button makes the navigation process quicker and easier.

jQuery Scroll to Top button can be built easily with CSS. You can easily create the Back to Top button using jQuery and CSS. Our example code provides an easy way to add a “back to top” button on your website using jQuery and CSS. This jQuery Scroll to Top plugin is an instant solution to integrate back-to-top button functionality into the web application.

Follow the simple steps to create scroll Back to Top button for your website without using any third-party jQuery plugin.

Scroll To Top Button with jQuery

HTML Code:
Define an HTML link element to display the Back-To-Top button on the webpage, which will take the user to the top of the webpage when clicked.

<a href="javascript:void(0);" id="backToTop" class="back-to-top">
    <i class="arrow"></i><i class="arrow"></i>
</a>

jQuery Library:
We will use jQuery to handle the back-to-top button visibility and click event, so include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

JavaScript Code:
The following JavaScript code handles the back-to-top button visibility and tracks the click event for auto-scroll.

• Select the button element by ID (backToTop).
• Use the window scroll event to detect whether the user scrolls the page down.
  • If the page is scrolled down more than 300 pixels, display the back-to-top button. Otherwise, hide the button.
• Use the jQuery click event to detect whether the user clicks on the back-to-top button.
  • Set scrollTop to 0 in the .animate() method to scroll the page to the top using jQuery.

var btn = $('#backToTop');
$(window).on('scroll', function() {
    if ($(window).scrollTop() > 300) {
        btn.addClass('show');
    } else {
        btn.removeClass('show');
    }
});
btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: 0
    }, '300');
});

CSS Code:
The following CSS code is used to add some style to the back-to-top button.

• CSS media queries are used to make the back-to-top button responsive for the different screen sizes.
• Additionally, we have added some bounce animation with CSS keyframes rules to look the back-to-top button attractive.

.back-to-top {
    position: fixed;
    bottom: -40px;
    right: 40px;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #335dff;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.back-to-top:focus {
    color: #fff;
}
.back-to-top.show {
    bottom: 40px;
    right: 40px;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.back-to-top.show:hover {
    color: #fff;
    bottom: 30px;
    opacity: 1;
}
.arrow {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
    position: absolute; width: 12px; height: 12px; background-size: contain;
    transform: rotate(-90deg);
    top: 30%;
    left: 40%;
}
.arrow:nth-child(2){
    top: 42%;
}

@keyframes bounceAlpha {
    0% {opacity: 1; transform: rotate(-90deg) translateX(0px) scale(1);}
    25%{opacity: 0; transform: rotate(-90deg) translateX(10px) scale(0.9);}
    26%{opacity: 0; transform: rotate(-90deg) translateX(-10px) scale(0.9);}
    55% {opacity: 1; transform: rotate(-90deg) translateX(0px) scale(1);}
}

.back-to-top:hover .arrow{
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.back-to-top:hover .arrow:nth-child(2){
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-delay:0.2s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@media only screen and (max-width: 575px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .back-to-top.show {
        bottom: 10px;
        right: 10px;
    }
    .back-to-top.show:hover {
        bottom: 10px;
    }
    .arrow {
        top: 27%;
        left: 37%;
    }
}

jQuery BackToTop Button Script

The following script shows how you can integrate the back-to-top button on the web page.

• The HTML and JavaScript code integration part is provided in this code sample.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>jQuery Back To Top Button by CodexWorld</title>
<meta charset="utf-8">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- Back-to-top button handler code -->
<script>
$(document).ready(function(){
    var btn = $('#backToTop');
    $(window).on('scroll', function() {
        if ($(window).scrollTop() > 300) {
            btn.addClass('show');
        } else {
            btn.removeClass('show');
        }
    });
    btn.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, '300');
    });
});
</script>
</head>
<body>

<!-- BackToTop Button -->
<a href="javascript:void(0);" id="backToTop" class="back-to-top">
    <i class="arrow"></i><i class="arrow"></i>
</a>

<!-- ++++++++++++ Page Body Content Goes Here ++++++++++++ -->

</body>
</html>

Note that: Don’t forget to add the CSS code to the script. Download the source code package to get all the code together.

Social Popup on Page Scroll using jQuery and CSS

Conclusion

This tutorial provided a simple script to implement a back-to-top button on the web page. You can easily customize the scroll-to-top button appearance by modifying the CSS code. If you want to scroll any specific part of the web page, go through this tutorial – Scroll to Specific Part of the Webpage using jQuery