Simple Scroll To Top Button

I am not a huge fan of scroll to top button, but it is featured on many websites. The idea is to scroll to top of the page when you have a lot of content.

The scroll you will about to implement is be placed at the bottom right of your screen after you scroll 1/3 of your page. Let’s get it started. Firstly, add FontAwesome icons to your page or website . Secondly, place your HTML code at the bottom of your page (footer).

HTML

<div id="to-top">
       <i class="fa fa-chevron-up"></i>
      </div>

CSS

html, body {
height: auto;
} //VERY IMPORTANT in order to work JS properly
#to-top {
    background-color: #333;
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}
#to-top i {
    padding: 17px;
    color: #fff;
}

JavaScript

        $(document).scroll(function() {
            var y = $(this).scrollTop();
            if (y > $('html').height() / 3) {
                $('#to-top').fadeIn();
            } else {
                $('#to-top').fadeOut();
            }
        });
        $('#to-top').click(function() {
            $('html,body').animate({ scrollTop: 0 }, 'slow');
            return false;
        });

What do you think? Is there an easier or better way to do it? Share in the comments below.