Highly Customizable jQuery Back To Top Plugin - go2top

go2top is a simple, lightweight jQuery plugin for creating a SVG based back to top button which allows the visitor to go back to the top of the webpage. The back to to button appears when scrolling down and auto hides it self when you reach the top of the webpage. You can customize the styles and behaviors directly in the JavaScript.

How to use it:

1. First you need to load jQuery library and the jQuery go2top plugin at the end of your html document.

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

2. And then initialize the plugin to generate a default back to top button on the webpage.

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

3. Customize the back to to button with the following options.

$.goup({

  // where to place the back to top button 
  // "left" or "right"
  location: "right",

  // left/right offset in pixels
  locationOffset: 150,

  // bottom offset in pixels
  bottomOffset: 100,

  // width / height of the back to top button
  containerSize: 40,

  // radius of the back to top button
  containerRadius: 10,

  // CSS class for the back to top button
  containerClass: "goup-container",

  // always visible
  alwaysVisible: false,

  // trigger offset
  // after how many scrolled down pixels the button must be shown
  trigger: 250,

  // animation for the back to top button
  // "slide" or "fade"
  entryAnimation: "fade",

  // scroll speed
  // "slow", "normal" or "fast"
  goupSpeed: "slow",

  // the threshold of window width under which the button is permanently hidden
  hideUnderWidth: 500,
  second: 0.3,

  // background color
  bcolor: "#eee",

  // hover color
  acolor: "#bbb",

  // path to the back to top icon
  img: "arrow_up.svg"
  
});

---

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