Scroll Page Back To Top With jQuery - toTop.js
| File Size: | 5.62 KB |
|---|---|
| Views Total: | 4380 |
| 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.
<div class="totop">↑ 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.











