Highly Customizable Smooth Scroll To Top Plugin - Goup

Goup is a simple yet fully configurable jQuery scroll to top button which allows users to scroll back to the top of the page. The plugin will automatically generates a 'Back To Top' button in the lower-right (or lower-left) corner of long page that appears after a set scrolling position and hides after scrolling near the top.

How to use it:

1. To get started, just include both jQuery library and the jQuery Goup plugin at the end of the document:

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

2. And then call the function on document ready. That's it.

$(document).ready(function(){
  jQuery.goup();
});

3. Place the 'Back To Top' button in the lower-left corner of your long webpage.

jQuery.goup({
  location: 'left'
});

4. Change the default animation speed for smooth scroll.

jQuery.goup({
  goupSpeed: 'fast'
});

5. More configuration options with default values.

jQuery.goup({
  
  // Location
  location: 'right',

  // How many pixel the button is distant from the edge of the screen
  locationOffset: 20,

  // How many pixel the button is distant from the bottom edge of the screen
  bottomOffset: 10,

  // The width and height of the button
  containerSize: 40,

  // Let you transform a square in a circle
  containerRadius: 10,

  // The class name given to the button container
  containerClass: 'goup-container',

  // The class name given to the arrow container
  arrowClass: 'goup-arrow',

  // Set the button to be always visible
  alwaysVisible: false,

  // After how many scrolled down pixels the button must be shown 
  trigger: 500,

  // "slide" or "fade"
  entryAnimation: 'fade',

  // Animation speed
  goupSpeed: 'slow',
  
  // The threshold of window width under which the button is permanently hidden
  hideUnderWidth: 500,

  // The color of the container
  containerColor: '#000',

  // The color of the arrow
  arrowColor: '#fff',

  // A text to show on the button mouse hover
  title: '',

  // If true the hover title becomes a true text under the button
  titleAsText: false,

  // The class name given to the title text
  titleAsTextClass: 'goup-text',

  // Set the z-index
  zIndex: 1
  
});

Change log:

2017-09-01

• v1.1.3

2017-08-09

• code refactor

---

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