Auto Show / Hide Scroll To Top Button with jQuery - gotop

Yet another jQuery plugin to create a customizable scroll to top arrow (button) for scrolling the web page to the top.

The plugin reveals the scroll to top arrow when scrolling down, and fades it out when scrolling up.

How to use it:

1. Import jQuery library and the jQuery gotop plugin into your long web page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.gotop.min.js"></script>

2. Load the Font Awesome Iconic Font for the scroll to top icon.

<link rel="stylesheet" href="/path/to/fontawesome/all.css">

3. Create a container for the scroll to top button at the bottom of your web page.

<div id="goTop"></div>

4. Initialize the plugin to generate a default scroll to top arrow that stays in bottom right corner of a browser when you scroll down the page. By default, the plugin uses Glyphicon for arrow icon.

$('#goTop').goTop();

5. Customize the plugin by passing the option objects during initialization.

$('#goTop').goTop({

  // container element to place the scroll to top button
  container: '',

  // The amount of pixels the page must be scrolled down before the arrow is displayed.
  appear: 200,

  // how long the animation will run when scrolling to the top of the page.
  scrolltime: 800,

  // The CSS classes used to display the arrow.
  src: "fas fa-chevron-up",

  // The width of the arrow.
  width: 45,

  // The location where the arrow will be shown.
  // "right" or "left"
  place: "right",

  // how long the animation will run when fading in to opaque.
  fadein: 500,

  //  how long the animation will run when fading out to transparent.
  fadeout: 500,

  // Sets the transparency level for the arrow, 
  // where 1 is not transparent at all, 
  // 0.5 is 50% see-through and 
  // 0 is completely transparent.
  opacity: 0.5,

  // The percentage amount indicating how far away the arrow is from the bottom, left, or right, 
  // depending on the value of place.
  marginX: 2,

  // The percentage amount indicating how far away the arrow is from the top or bottom, 
  // depending on the value of place.
  marginY: 2,

  // The CSS z-index property
  zIndex: 9

});

Changelog:

2019-06-25

• Use Font Awesome Iconic Font

---

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