Highly Customizable Floating Back To Top Button With jQuery

Highly Customizable Floating Back To Top Button With jQuery
File Size: 29.7 KB
Views Total: 4145
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.