Highly Customizable Floating Back To Top Button With jQuery

Highly Customizable Floating Back To Top Button With jQuery
File Size: 30.6 KB
Views Total:
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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</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: []

});

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: []

});

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