This time I will share jQuery Plugin and tutorial about Scroll To Top Button With Custom Icon & Animation – back-to-top.js, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="jquery.back-to-top.css"> |
3 |
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" |
4 |
crossorigin="anonymous"></script> |
5 |
<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.
3 |
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" |
4 |
crossorigin="anonymous"> |
3. Create an empty a link for the back to top icon.
1 |
<a href="#" class="bck"></a> |
4. Initialize the plugin to generate a default back to top button.
5. Customize the back to top icon.
2 |
iconName: 'fas fa-chevron-up' |
6. Set the distance from the top to reveal the back to top button on scroll.
7. Customize the show/hide animations for the back to top button.
08 |
fxTransitionDuration : 300 |
8. Set the duration of the scroll animation.
This awesome jQuery plugin is developed by axelco. For more Advanced Usages, please check the demo page or visit the official website.
