a button that appears only when users scroll down the page allowing them to scroll to the top of the page.
var scrollTrigger = 400;//height on which the button will show
var fadeInTime = 300;//how slow/fast you want the button to show
var fadeOutTime = 300;//how slow/fast you want the button to hide
backToTop = function () {
if(jQuery(window).scrollTop() >= scrollTrigger){
jQuery("#clicktotop").fadeIn(fadeInTime);
} else {
jQuery("#clicktotop").fadeOut(fadeOutTime);
}
};
$(window).on('scroll', function () {
backToTop();
});
#clicktotop {
background-color: $primary;
bottom: 100px;
display: none;
height: 35px;
position: fixed;
right: 20px;
width: 35px;
z-index: 10000000000;
.clicktotopimg {
color: white;
display: block;
height: 100%;
text-align: center;
width: 100%;
i {
font-size: 25px;
}
}
}
<div id="clicktotop">
<a title="top" class="clicktotopimg" onclick="jQuery('html, body').animate( { scrollTop: 0 }, 'slow' );" href="javascript:void(0);"><i class="fa fa-chevron-up"></i></a>
</div>