Scroll To Top Button With Custom Icon & Animation - back-to-top.js

File Size: 5.05 KB
Views Total: 6613
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Scroll To Top Button With Custom Icon & Animation - back-to-top.js

back-to-top.js is a small jQuery plugin to create a custom scroll to top button that animates scrolling to the top of the page when clicked.

Auto hides when on top and auto reveals on scroll.

How to use it:

1. Load the Stylesheet jquery.back-to-top.css and JavaScript jquery.back-to-top.js in your HTML document.

<link rel="stylesheet" href="jquery.back-to-top.css">
<script src=""  
<script src="jquery.back-to-top.js"></script>

2. Load an icon font of your choice for the back to top icon. Default: Font Awesome.

<link rel="stylesheet" 

3. Create an empty a link for the back to top icon.

<a href="#" class="bck"></a>

4. Initialize the plugin to generate a default back to top button.




5. Customize the back to top icon.

  iconName: 'fas fa-chevron-up'

6. Set the distance from the top to reveal the back to top button on scroll.

  trigger : 300

7. Customize the show/hide animations for the back to top button.


  // 'rightToLeft', 'leftToRight'
  // 'bottomToTop', 'topToBottom '
  fxName : 'fade',

  // duration of animation
  fxTransitionDuration : 300

8. Set the duration of the scroll animation.

  scrollDuration : 300

This awesome jQuery plugin is developed by axelco. For more Advanced Usages, please check the demo page or visit the official website.