Smooth Scroll and Back to Top

by Rich Costello

HTML

<div id='filler'>This is filler</div>
<div id='toTop'><a href="#filler">To The Top!</a>

</div>
<div id='footer'>Some more content</div>

CSS

#filler {
    height: 1000px;
}
#toTop a {
    padding: 5px 5px;
    background: #000;
    color: #fff;
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
    text-decoration: none;
}

JavaScript

$(document).ready(function(){
	
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('#toTop a').fadeIn();
		} else {
			$('#toTop a').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('#toTop a').click(function(){
		$('html, body').animate({scrollTop : 0},100);
		return false;
	});
	
});