How to Create Scroll to Top Widget for Your Website?

Back to top or scroll to top is the feature allows you to move to the top of a page by clicking on an arrow generally placed near lower right corner of the page. It is always not necessary to use image for such a scroll to top feature. Since each image sends a separate HTTP request to your server it will add up the overall site loading time and customizing the image is also not very easy. In order to overcome this we offer the below scroll to top widget with CSS and jQuery with font awesome icon instead of image so that you can customize to suit your site’s layout.

Related: How to add scroll to top widget in Weebly site?

Scroll to Top Widget

The widget contains three parts:

• CSS
• Script
• HTML

1. CSS Code for Back To Top Widget

Below is the CSS code for the widget and paste this inside the header section of your site.

<style>
.backtotop {
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 55px;
height: 60px;
z-index: 100;
display: none;
text-decoration: none;
color: #808080;
}
.backtotop i {
font-size: 50px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Note: Instead of image we use font awesome icon, hence required CSS is linked accordingly.

2. jQuery Script for the Widget

Below is the script for the widget which needs to be placed in footer section of your site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.backtotop').css({'display': 'none'});
    var offset = 200;
    var duration = 600;
    $(window).scroll(function() {
        if ($(this).scrollTop() > offset) {
            $('.backtotop').fadeIn(duration);
        } else {
            $('.backtotop').fadeOut(duration);
        }
    });

    $('.backtotop').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

3. HTML for the Widget

And finally below is the HTML code to be placed inside the body of your web page to enable the back to top function.

<a href="#" class="backtotop" style="display: inline;">
<i class="fa fa-arrow-circle-up"></i>
</a>

Customizing the Back To Top Features

The advantage of using this widget is you can customize the complete function as per your need. Here are some of the customization options for you:

Scrolling Speed

The default speed of the scrolling is set as 600 in the script which you can increase or decrease.

Feature	Code	Where to Look
Scrolling Speed	var duration = 600;	Script

Scrolling Icon Display Position

The arrow icon will start displaying when the scroll bar is at the position 200px from the top which is defined in the script with the below code:

Feature	Code	Where to Look
Scrolling Icon Start Position	var offset = 200;	Script

You can change the starting position as you need.

Position of the Icon

By default, the up arrow icon will be displayed 60px up and 55px away from the lower right corner as defined in the CSS style. You can change it on trial and error method to check the suitable position for your site.

Feature	Code	Where to Look
Scrolling Icon Position at Lower Right Corner	width: 55px;height: 60px;	Style

Icon Style

We used the font awesome icon “fa-arrow-circle-up” which you can change it in the HTML code.

Feature	Code	Where to Look
Back to Top Icon Style	<i class=”fa fa-arrow-circle-up”></i>	HTML

Refer the directional icons section of font awesome icons list to use alternate icon for your site.

Icon Size

Default 50px is used as the font size for the icon in CSS style which you can change as per your need.

Feature	Code	Where to Look
Back to Top Icon Size	font-size: 50px;	Style

Icon Color

This is the most important part of customization where the color of the font icon can be easily changed to suit your site’s layout. Look for the code “color:  #808080;” in the CSS code and change it to any color as you need.

Feature	Code	Where to Look
Back to Top Icon Color	color:  #808080;	Style