Floating Back to Top Button HTML & CSS

A “Back to Top” button is a useful element to quickly jump to the beginning of the page. On the long pages, this button really helpful for the users to save their time to scroll to the top of a page. In this tutorial, you will come to know to create a floating back to the top button with a smooth scrolling effect using HTML, CSS, and jQuery.

Basically, a back to top link can be created using only HTML. Yes! you heard it right, if you place # inside the href attribute anchor (<a href="#"> Top </a>) then the page will be jumped to the top on click event. But you can not get the page scrolling effect using this method.

Before, getting started with coding, don’t forget to check out the final output on the demo page. OK! let’s get startt with HTML to create a floating back to top button.

HTML for Back to Top Button

First, we need to have enough height of the page in order to create a “back to top” button. So, create a div element and define temporarily 2000px height using the style attribute. After that, create a element with a unique id "return-to-top" and place Font Awesome chevron-up icon inside it.

<div style="height:2000px; text-align: center">
<h3>Scroll down</h3>
<i class="icon-arrow-down"></i>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

If you have already a long page with enough content, then skip the above step and place only the following a tag at the end of your HTML body contents.

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

In order to use the Font Awesome icon inside the back to top button, make sure you have loaded icons CSS file inside the head tag of your HTML document. If you are already using Font Awesome CSS in your project then skip this step. On the other hand, if you don’t want to use these icons, then you can place only text inside the above hyperlink or top arrow symbol ( ↑ ).

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" integrity="sha512-i8+QythOYyQke6XbStjt9T4yQHhhM+9Y9yTY1fOxoDQwsQpKMEpIoSQZ8mVomtnVCf9PBvoQDnKl06gGOOD19Q==" crossorigin="anonymous" />

The CSS Styles

After creating HTML, now it’s time to style the “back to top” button using CSS. So, target the #return-to-top element and define its width and height as 50px. Keep its fixed position and set 20px bottom and right values respectively. Similarly, define the background color, CSS border-radius to make it circular, and transition property as follows:

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(73, 122, 255, .8);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

Now, target the i element of #return-to-top id in order to style the icon. Keep its relative position, specify 16px, 13px values for the left and top property respectively. Likewise, define color, font-size, and margin property as mentioned in the below code:

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

Add the hover effect for back to top button described in the following snippet. If you want to add a custom hover effect, check out this buttons hover effects tutorial.

#return-to-top:hover {
    background: rgb(73, 122, 255);
#return-to-top:hover i {
    color: #fff;
    top: 5px;

Finally, add the jQuery JavaScript library and back to top function just before the closing of the body tag.

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    // ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
$('#return-to-top').click(function() {      // When arrow is clicked
        scrollTop : 0                       // Scroll to top of body
    }, 500);

That’s all! I hope you have successfully created the floating back to the top button for your HTML page. If you have any questions or suggestions let me know by comment below.

You Might Be Interested In:

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

4 thoughts on “Floating Back to Top Button HTML & CSS”

  1. Thank you so much! I was wondering how to do this to add to my website. I customized it a bit to fit my Font Awesome icon, jquery3.60 and website color but over all this is great!

    • Hi Jasmine!
      Thanks for your feedback. Keep visiting us for more free HTML, CSS coding tutorials.

  2. Hi

    Thank you for your demo and download buttons.

    I had visited w3schools for multi-tab page example and return to top button.
    multi-tab page: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
    return to top button: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top

    When I try insert the return to top example into the multi-tab page division, only the last tab(Tokyo) shows up the button, ie the other two tabs (London and Paris) does not show the button.
    When I try to insert your example into the multi-tab, the button only show up in the first tab(London) and not the other two tabs. My guess is I can use your example in the London tab and w3school example in the Tokyo tab, but I am left with the Pairs tab that has no button, unless I can find another example, lol. Can you suggest how Paris may have a return to top button ?

    Thank you.
    Soon Ann

    • You can try to duplicate the w3shools code and then change the ID in the javascript code and put same id into Paris tab button. May this work for you.

Comments are closed.