Highly Customizable Floating Back To Top Button With jQuery

Yet another jQuery scroll to top plugin for displaying a fully configurable floating button when scrolling down that allows the user to quickly and smoothly scrolls the page to the top.

More features:

• Auto show/hide based on the scroll position.
• Auto disables on mobile device.
• Custom back to top icon.
• 4 position options.
• Configurable animations.

How to use it:

1. Import the Floating ToTop Button plugin's files into the html page which has jQuery library included.

<link href="css/floating-totop-button.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/floating-totop-button.js"></script>

2. Initialize the plugin to generate a basic back to top button on the page.

$("body").toTopButton();

3. Customize the icon displayed in the back to top button.

$("body").toTopButton({

  // path to icons
  imagePath: './img/icons',

  // arrow, arrow-circle, caret, caret-circle, circle, circle-o, arrow-l, drop, rise, top
  // or your own SVG icon
  arrowType: 'arrow',

  // 'w' = white
  // 'b' = black
  iconColor: 'w',

  // icon shadow
  // from 1 to 16
  iconShadow: 4

});

4. Customize the appearance of the back to top button.

$("body").toTopButton({

  // opacity from 0 to 20
  opacity: 20,

  // border radious from 0-10 (0-50%)
  shape: 10,

  // from 0-10 (0-100px)
  margin: 2,

  // custom color
  palette: '',
  
  // background color
  backgroundColor: '',

  // border options
  border : { 
    width: 0,
    color: ''
  },

  // 'tl': top-left
  // 'tr': top-right
  // 'bl': bottom-left
  // 'br': bottom-right.
  position: 'br',

  // button size from 1-6 (30-80px)
  size: 4,

  // button shadow from 1-5
  btnShadow: 2,

  // uses CSS filter
  filter: true,

  // classes for the link
  linkClasses: [],

  // classes for the image
  imgClasses: [],

  // image class
  imgClass: 'arrow-img'

});

5. Customize the behavior of the back to top button.

$("body").toTopButton({

  // scroll position to show the button
  scrollTrigger: 300,

  // animation speed for smooth scroll
  animationTime: 700,

  // fade in/out speed
  fadeInSpeed: 'fast',
  fadeOutSpeed: 'fast',

  // auto hides when the screen size is smaller than this value
  mobileHide: 768,

  // auto hides when reaching the top
  autoHide: true,

  // additional selectors
  clickSelectors: []

});

Changelog:

2020-04-14

• added classes to config, reworked config handling

2020-03-23

• added '$.extend()' deep merge parameter which is necessary for specific passed configuration options

2020-03-18

• Finally fixed button scrolled appearance

2020-03-17

• Fixed bug where button is hidden when site is loaded at scroll position

---

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