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 |
1 Comment
Leave your reply.