Customizable Back To Top Button with jQuery - backTop

File Size: 45.9 KB
Views Total: 17625
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Back To Top Button with jQuery - backTop

backTop is a jQuery plugin that provides a simple way to display a back to top button as you scroll down the page. When you click on the back to top button, the page will scroll to the top of the webpage smoothly. The plugin also has the ability to hide the back to top button when the page reaches the top of the browser window.

How to use it:

1. Load the backTop.css stylesheet for the basic styles.

<link href="css/backTop.css" rel="stylesheet">

2. Create a back to top link at the bottom of your webpage.

<a id='backTop'>Back To Top</a>

3. Load jQuery JavaScript library and the jQuery backTop plugin before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.backTop.min.js"></script>

4. Initialize the plugin to enable the smooth back to top functionality to the link you just created.

$(document).ready( function() {
$('#backTop').backTop({

  // the scroll position in px from the top
  'position' : 400,

  // scroll animation speed
  'speed' : 500,

  // red, white, black or green
  'color' : 'red',
});
});

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