Mobile-friendly Back To Top Button - jQuery ScrollToTop Arrow

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

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.