Create Back To Top Button For WordPress

Imagine we read a long post content and when we almost at the bottom of the page, it can be very useful if there is a link or button we can click to go back or scroll to top. We can use the scroll to go to the top, but this is not a good way for very long content. Here is how to create the back to top link without plugin or editing current template files. We will use smooth scrolling effect with jQuery for better user experience to avoid fast jumping.

Creating Link to WordPress Footer

First, we need to create the link. We can add it to the header, but I think it is better if we add that to the footer. There is a hook we can use wp_head or wp_footer. Add the codes above to the theme function.php:

add_action( 'wp_footer', 'back_to_top' );
function back_to_top() {
    echo '<a id="totop" href="#">Back to Top</a>';
}

We have added a link Back to Top and need it to style using CSS.

Adding Link Styles

Still using the functions.php, now we need to add the link style and make it to the bottom right of the page. We will put the style in the WordPress header using wp_head.

add_action( 'wp_head', 'back_to_top_style' );
function back_to_top_style() {
    echo '<style type="text/css">
    #totop {
        position: fixed;
        right: 30px;
        bottom: 30px;
        display: none;
        outline: none;
    }
    </style>';
}

Adding Scrolling Effect

The last, we need to add the scrolling effect to avoid jumping using jQuery to the header of footer of the page. This code will runs if current theme already enqueue the jQuery. If not, we will need to add it to the theme. The link will be displayed if our position more than 400 pixels from the page header and will be hide while we are on top. We can change height to any number we would like to set.

add_action( 'wp_footer', 'back_to_top_script' );
function back_to_top_script() {
    echo '<script type="text/javascript">
    jQuery(document).ready(function($){
        $(window).scroll(function () {
            if ( $(this).scrollTop() > 400 )
                $("#totop").fadeIn();
            else
                $("#totop").fadeOut();
        });
 
        $("#totop").click(function () {
            $("body,html").animate({ scrollTop: 0 }, 800 );
            return false;
        });
    });
    </script>';
}

With only three easy steps, now we have a back or scroll to top link with smooth scrolling effect. You can customize the link using image or other link styles.