Simple Scroll Back to Top Widget

Improve your website’s user experience with a very simple arrow which fades in when visitors start scrolling the page. The page smoothly scrolls back to top when the the button is clicked.

You can see the live demo with gibberish text or just scroll down this page and look the bottom right corner of the site. It’s using the same widget.

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*/