Display Back to Top Link Only on Small Devices

In this tutorial I’m going to show you how-to display a “back to top” link only on small devices.

HTML

The HTML for the “back to top” link is:

<a href="#top" title="Back To Top" class="backtotop" rel="nofollow">Back To Top</a>

You can of course change the link text and even change the link text to an icon.

I would recommend Font Awesome, particularly the arrow up circle icon.

<i class="fa fa-arrow-circle-up"></i>

The HTML for the above font icon would be:

<a href="#top" title="Back to Top" class="backtotop" rel="nofollow"><i class="fa fa-arrow-circle-up"></i></a>

CSS

We will start by not displaying the “back to top” link all together.

a.backtotop,
a.backtotop:link,
a.backtotop:visited,
a.backtotop:active,
a.backtotop:hover {
    display: none
}

Next, we will reset the “back to top” link to display on devices with the maximum width of 768px.

@media screen and (max-width: 767px) {
    a.backtotop,
    a.backtotop:link,
    a.backtotop:visited,
    a.backtotop:active {
        display: inline; //block, etc...
    }
    a.backtotop:hover {

    }
}

You can change the maximum on line one (1) – just look for max-width: 767px.

For the above code snippet, when the “back to top” link will be displayed on small devices, you can also add CSS to customize the design of your “back to top” link.