How To Create a Scroll Back To Top Button

HTML

Add the link below anywhere to your HTML source, for example in the footer before the closing </body> tag. For WordPress use the footer.php or any other template file that’s displayed on all pages. The link has a unique identifier, a tooltip title and contains a special arrow character (➤), so we don’t have to use an image to display the arrow.

<a id="back2Top" title="Back to top" href="#">&#10148;</a>

CSS

Include the stylesheet and adjust it if your website’s design requires that. Set the size, colors, position, hover effect of the arrow. The HTML arrow character we used was originally pointing rightwards and this CSS code is rotating it counterclockwise to make it point upwards.

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #555;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #DDF;
    color: #000;
}

JavaScript

Add this JavaScript code to your website theme and make sure jQuery is used.
The script checks the height position on every page scroll and fades in the widget if it has reached the 100px limit while another event listener detects the button clicks and smoothly scrolls back to the top of the page.

/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});
$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

});
 /*Scroll to top when arrow up clicked END*/