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="://"></script>
<script src="totop.min.js"></script>

3. Activate the back to top button.


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.

  duration: 1000

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

  scrtollTopBtnDuration: 400

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

  scrollTop: 1000

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