rachelleyen
9/8/2017 - 7:09 AM

Click to Top

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>