Smooth Scroll to the Top of the Page – jQuery

When content of a web page exceeds a page and visitors scroll down the web page, then having a button to smooth scroll to the top of the page is a good idea. jQuery scroll function made it very easy to create a such a button just by writing a few lines of code. jQuery scroll function checks if the document is scrolled and is greater than a given value, then shows the scroll to top button, if the page is not scrolled or scrolled to the top of the page, then it hides the button.

By the end of this article, you will be able to create your own smooth scroll to top button on any web page.

Smooth Scroll to the Top of the Page

HTML Code

The ID of the link element will be used to show the button and scroll to the top of the page.

<a href="#" ID="backToTop"></a>

CSS Code

The CSS code is displaying the button at the bottom-center of the page.

a#backToTop {
a#backToTop {
    width:40px;
    height:40px;
    opacity:0.5;
    position:fixed;
    bottom:5px;
    left:50%;
    display:none;
    text-indent:-10000px;
    outline:none !important;
    background-image: url('top.png');
    background-repeat: no-repeat;
}

jQuery Code

The jQuery code checks if the value of the page scrolled down is greater than 50, then fadeIn() the button, when the button is clicked, then scroll the page to the top and fadeOut() then button.

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").scrollTop(0);
        return false;
    });
});

Scrolling Smoothly

To make a smooth scroll, we will use jQuery animate function and assign the speed to scroll to the top of the page.

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

Resources

• jQuery
• jQuery Scroll function
• jQuery Animate function
• jQuery FadeIn() and FadeOut functions

Demo

Scroll down the page and you will see the red up-arrow button at the bottom-center of the page.

The post Smooth Scroll To The Top of The Page – jQuery appeared first on Noor Ahmad Feroozi.