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>
</div>
<!-- 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>
    <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
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
    </script>

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.