Scroll Page Back To Top With jQuery - toTop.js

File Size: 5.62 KB
Views Total: 4282
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Scroll Page Back To Top With jQuery - toTop.js

jQuery toTop.js is an ultra-light jQuery back to top plugin which enables an element to smooth scroll the page back to the top at a given speed.

How to use it:

1. Create a back to top button at the bottom of the page.

<div class="totop">&uarr; To Top</div>

2. Import jQuery library and the jQuery toTop.js script into the page.

<script src="://code.jquery.com/jquery.min.js"></script>
<script src="totop.min.js"></script>

3. Activate the back to top button.

$('.totop').tottTop();

4. Style the back to top button whatever you like.

.totop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  cursor: pointer;
  display: none;
  background: #a05b7e;
  color: #fff;
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 18px;
}

5. Set the duration of the scroll animation.

$('.totop').tottTop({
  duration: 1000
});

6. Set the duration of the button show and hide animations.

$('.totop').tottTop({
  scrtollTopBtnDuration: 400
});

7. Set the distance from the top of the page to reveal the back to top button.

$('.totop').tottTop({
  scrollTop: 1000
});

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