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="https://code.jquery.com/jquery-3.3.1.min.js"  
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  
        crossorigin="anonymous"></script>
<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" 
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
      crossorigin="anonymous">

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.

$(function(){

  $('.bck').backToTop();    

});

5. Customize the back to top icon.

$('.bck').backToTop({
  iconName: 'fas fa-chevron-up'
});    

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

$('.bck').backToTop({
  trigger : 300
});    

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

$('.bck').backToTop({

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

  // duration of animation
  fxTransitionDuration : 300
  
});       

8. Set the duration of the scroll animation.

$('.bck').backToTop({
  scrollDuration : 300
});    

---

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