Highly Customizable Floating Back To Top Button With jQuery

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="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.

  • Publication date: 22.02.2019
  • Source