Simple jQuery Plugin For Scroll To Top Button - scrollToTop

File Size: 269 KB
Views Total: 53732
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin For Scroll To Top Button - scrollToTop

Just another jQuery scroll to top plugin that displays a back to top button at the lower right corner of your current page. 

Features:

  • Scroll to top with smooth animations and easing support.
  • Custom animation speed.
  • 5 built-in skins: default, cycle, square, text and triangle.
  • Auto hides the button when the page has reached the top.
  • Cross browser.

You might also like:

How to use it:

1. Include required CSS files in your page.

<link rel="stylesheet" href="css/scrollToTop.css">
<link rel="stylesheet" href="css/easing.css">

2. Include the latest jQuery javascript library and jQuery scrolltotop plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../src/jquery-scrollToTop.js"></script> 

3. Call the plugin with options.

<script type="text/javascript">
$(document).ready(function($) {
$('body').scrollToTop({
  distance: 200,
  speed: 1000,
  easing: 'linear',
  animation: 'fade', // fade, slide, none
  animationSpeed: 500,

  mobile: {
    width: 768,
    distance: 100,
    speed: 1000,
    easing: 'easeInOutElastic',
    animation: 'slide',
    animationSpeed: 200
  },

  trigger: null, // Set a custom triggering element. Can be an HTML string or jQuery object
  target: null, // Set a custom target element for scrolling to. Can be element or number
  text: 'Scroll To Top', // Text for element, can contain HTML

  skin: null,
  throttle: 250,

  namespace: 'scrollToTop'
});
});
</script>

Change log:

v0.4.3 (2017-09-12)

v0.4.2 (2016-10-17)

  • ES5 -> ES6

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