Easy Scroll-Up To Refresh Plugin For jQuery - scrollup.js

scrollup.js is a jQuery plugin which implements the familiar mobile 'pull to refresh' functionality on your desktop website. Uses scrollUp event instead of touch swipe.

How to use it:

1. Download and insert the jQuery scrollup.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scrollup.js"></script>

2. Implement the scrollUp on the whole body and specify the loading content you prefer.

$(document).scrollup.create('body', {
  content: 'Refreshing...'
});

3. Style the loading area.

.scrollup {
  background: #ddd;
  text-align: center;
  padding: 50px;
  margin: 0 auto;
}

4. All configuration options and callback functions.

$(document).scrollup.create('body', {

  // The HTML content that will be displayed when the user scrolls up
  content: '',
  
  // The CSS class of the containing object that will be created when the user scrolls up
  class: 'scrollup',
  
  // Milliseconds value before the scrollup content will be automatically removed. If left blank, the scrollup object won't be removed at all
  timeout: 3000,
  
  // Event triggered when a scrollup option has timed out
  timedOut: function() { },
  
  // Event triggered when the creation of a scrollup object is started
  create: function() { },
  
  // Event triggered when the creation of a scrollup object is finished
  created: function() { },
  
  // Event triggered when the removal of a scrollup object is started
  remove: function() { },
  
  // Event triggered when the removal of a scrollup object is finished
  removed: function() { },
  
  // Event triggered when the creation of a scrollup object is started, but the object already exists
  exists: function() { },
  
  // Speed of the animation when a scrollup object is createdo r removed. Valid options are 'slow' or 'fast'
  animationSpeed: 'fast',
  
  // If enabled, debug messages for events will be displayed
  debug: false
  
});

---

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