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

/* $('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 500);
            return false;
        }
    }
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#toTop a').fadeIn();
    } else {
        $('#toTop a').fadeOut();
    }
}); */

$(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},600);
		return false;
	});
	
});