Mobile-friendly Back To Top Button - jQuery ScrollToTop Arrow
File Size: | 5.79 KB |
---|---|
Views Total: | 3502 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery back to top plugin that tracks how far users are scrolling and displays a Back To Top button in the lower right corner of the document when the page is scrolled below a specific point.
How to use it:
1. The required HTML structure for the back to top arrow. Copy and paste the following HTML snippets into the body tag of your html document.
<div id="scrolltotop_parent" class="scrolltotop_hide_onload"> <div tabindex="0" id="scrolltotop_arrow"> </div> </div>
2. Import jQuery JavaScript library together with the jQuery ScrollToTop Arrow plugin's files into the html document. That's it.
<link rel="stylesheet" href="css/scrolltotop_arrow_style.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"> </script> <script src="js/scrolltotop_arrow_code.js"></script>
3. Adjust the speed of the scrolling.
scrolltotop_scroll_speed=200;
4. Adjust the speed of the fading.
scrolltotop_animation_speed=500;
5. Customize the back to top button. True means you have a circle, false means you have a rectangle with round corners.
scrolltotop_circle_mode=true;
This awesome jQuery plugin is developed by FabianLins. For more Advanced Usages, please check the demo page or visit the official website.