jQuery Plugin For Smooth Scroll To Top And Bottom - scrollToTop

scrollToTop is fast jQuery plugin that allows you to scroll to top and bottom of your page with a smooth scrolling effect.

You might also like:

• Simple Back To Top Link
• Simple jQuery Plugin For Scroll To Top Button - scrollToTop
• Smooth Page Scroll to Top with jQuery
• Lightweight Animated Scroll To Top Plugin - scrollUp
• Imageless Top of The Page Plugin For jQuery - iTopPage
• Beautiful Back-To-Top Button
• Simple jQuery Scroll To Top Plugin
• jQuery Scroll To Top and Barcode Plugin

How to use it:

1. Include the jQuery javascript library and jQuery scrollToTop plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.totop.js"></script>

2. Create a container for the scroll to top (bottom) panel.

<div id="totopscroller"> </div>

3. Add the following styles to your CSS file.

#totopscroller {
position: fixed;
right: 30px;
bottom: 30px;
width: 43px;
}
#totopscroller div {
width: 49px;
height: 43px;
position: relative;
}
#totopscroller a {
display: none;
background: url('totopicons.png');
width: 49px;
height: 43px;
display: block;
text-decoration: none;
border: medium none;
margin: 0 0 -1px;
border: 1px solid #949494;
}
.totopscroller-top {
background-position: 0 0 !important;
}
.totopscroller-lnk {
background-position: 0 -43px !important;
}
.totopscroller-prev {
background-position: 0 -129px !important;
position: absolute;
top: 0;
left: 0;
}
.totopscroller-bottom {
background-position: 0 -86px !important;
position: absolute;
top: 0;
left: 0;
}

4. Call the plugin with options.

<script>
$(function(){
$('#totopscroller').totopscroller({
link:'https://www.jqueryscript.net' // show a link button
});
})
</script>

5. Available options.

<script>
$(function(){
$('#totopscroller').totopscroller({
showToBottom: true,
showToPrev: true,
link: false,
linkTarget: '_self',
toTopHtml: '<a href="#"></a>',
toBottomHtml: '<a href="#"></a>',
toPrevHtml: '<a href="#"></a>',
linkHtml: '<a href="#"></a>',
toTopClass: 'totopscroller-top',
toBottomClass: 'totopscroller-bottom',
toPrevClass: 'totopscroller-prev',
linkClass: 'totopscroller-lnk',
});
})
</script>

---

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