Create Back To Top Button For WordPress

Back to Top

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.

10 comments on “Create Back To Top Button For WordPress

    1. Try to change the line:
      echo ‘<a id=”totop” href=”#” rel=”nofollow”>Back to Top</a>’;
      to
      echo ‘<img id=”totop” alt=”” src=”the_img_url_here” />’;

  1. Hi,
    thank you very much, sorry, not received mail notification when you posted your response, damage that lack this option on your site.
    the url can be relative?
    or it must be an absolute url?
    do you have a tip for this image? A site preference for having an image optimized?
    Thank you very much

  2. Hi

    Great script. It works fine with the text. But with the pic instead of the text I am facing Problems. The pic does not appear. Maybe you can give a hint…

    Cheers from Germany
    Hansjörg

Create Comment

Your email address will not be published. Required fields are marked *