Scroll to top button feature in a website allow users to Scroll to top of webpage smoothly. If website page have more content then it is tough task for user to go top of such web page after reading its content. So for good user experience we must add scroll to top button so that user can easily go to top of page.

In this tutorial, we are going to discuss How To Create Scroll To Top Button With jQuery . This features will give good experience to your website visitors to navigate to top of webpage when it have lots of content to scroll back. We check if scrollbar positions from the top of page and if it is greater than certain value then we fadein a scroll to top button so that user can easily navigate to top of page.

Back To Top With jQuery

HTML Code:

This is an HTML Code in body to display back to top button.

    ▲   

CSS Code:

This is css code to style back to top button.

#go-to-top
{
    position: fixed;
    bottom: 30px;
    right: 15px;
    display:none;
}
#go-to-top a {
    background: #ef4748;
    color: #fff;
    width: 30px;
    height: 26px;
    border-radius: 5px;
    display: block;
    padding: 16px 10px 10px 12px;
    text-align: center;
}

jQuery Code:

Scroll event works when user scroll down the page.The given below Jquery code will display back to top button when user scroll down web page greater than 120px from top else will be hide.

//for fadein and fadeout top button
$(window).scroll(function () {
    if ($(this).scrollTop() > 120)
    {
        $("#go-to-top").fadeIn();
    } else
    {
        $("#go-to-top").fadeOut();
    }
});

This script will scroll up page smoothly when user clicks on back to top button. The jQuery animate() function and scrollTop events are used here to go back to top of page smoothly.

//scroll webpage body to top
$("#go-to-top a").on("click", function () {
    $("body html").animate({scrollTop: 0}, 650);
    return false;
});

Complete jQuery Code:

In this article you have learned about how to create back to top button with jQuery or how to create scroll to top button with jQuery. If you have any query regarding this article please comment. I will gladly help you. PHPCluster.

The post How To Create Scroll To Top Button With jQuery appeared first on PHPCluster.