Scroll Page To Top jQuery toTop - Download Scroll Page Back To Top With jQuery - toTop.js

Download Scroll Page Back To Top With jQuery – toTop.js

Posted on

This time I will share jQuery Plugin and tutorial about Scroll Page Back To Top With jQuery – toTop.js, hope it will help you in programming stack.

Scroll Page To Top jQuery toTop - Download Scroll Page Back To Top With jQuery - toTop.js

File Size: 5.62 KB
Views Total: 3598
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

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

3. Activate the back to top button.

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

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

01 .totop {
02   position: fixed;
03   bottom: 50px;
04   right: 50px;
05   cursor: pointer;
06   display: none;
07   background: #a05b7e;
08   color: #fff;
09   border-radius: 25px;
10   height: 50px;
11   line-height: 50px;
12   padding: 0 30px;
13   font-size: 18px;
14 }

5. Set the duration of the scroll animation.

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

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

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

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

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

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

source : jqueryscript.net