Back to top with CSS and jQuery

The Back to Top button takes the user back to the top of the page.

The button is visible at the bottom when the user starts scrolling the web page and crosses the defined range. It remains fixed at its position during the scroll.

It auto-hides when the user reaches the top of the page.

Demo Download

HTML
CSS
jQuery
Completed Code
Demo
Conclusion

1. HTML

Add an anchor element on the page. You can either put it at the start or end within the <body>.

Completed Code

<!-- Your content -->

<!-- Back to Top -->
<a href="#" class="back-to-top"></a>

2. CSS

Set the position: fixed and add an image in the background of the <a class='back-to-top'>.

Code

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    background-image: url(top.png);
}

.back-to-top:hover{
    opacity: 0.7;
}

3. jQuery

Attach scroll

Attaching the .scroll event handler to detect scroll on the web page. Using .scrollTop() method to returns the number of pixels the users have scrolled.

If the value is greater than 100 then .fadeIn() the <a class='back-to-top'> otherwise .fadeOut().

Back to top

On button click call .animate() method where passing scrollTop: 0 and 800 (duration) for scroll to top.

NOTE – Change value of showAfter variable to adjust when you want to display the button on the screen.

Code

$(document).ready(function(){
 
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){

        // Show button after 100px
        var showAfter = 100;
        if ( $(this).scrollTop() > showAfter ) { 
            $('.back-to-top').fadeIn();
        } else { 
            $('.back-to-top').fadeOut();
        }
    });
 
    // Click event to scroll to top
    $('.back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
 
});

4. Completed Code

<!-- CSS -->
<style>
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    background-image: url(top.png);
}
.back-to-top:hover{
    opacity: 0.7;
}

</style>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        // Show button after 100px
        var showAfter = 100;
        if ($(this).scrollTop() > showAfter ) { 
            $('.back-to-top').fadeIn();
        } else { 
            $('.back-to-top').fadeOut();
        }
    });
 
    //Click event to scroll to top
    $('.back-to-top').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
 
});
</script>

<!-- Your content -->

<!-- Back to top -->
<a href="#" class="back-to-top"></a>

5. Demo

View Demo

6. Conclusion

Ideal for the long web page to improve the user experience and it is easy to implement in the project. The user doesn’t need to manually scroll the web page in an upward direction to get on top of the web page.

If you found this tutorial helpful then don't forget to share.