スムーススクロール

ソースコード

<p id="toTop"><a href="#top"><img src="img/toTop.png"></a></p>

jQuery

$(function(){
	var topBtn = $('#toTop');    
    topBtn.hide();
    //スクロールがトップから100pxに達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
				
				
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

style.cssに追加する

@charset "utf-8";

/*
Back to top button 
*/
#toTop {
	position: fixed;
	bottom: 50px;
	right: 180px;
}
#toTop a {
	width: 100px;
	height: 100px;
	display: block;
	background: url(img/toTop.png) no-repeat;
	text-decoration: none;
	opacity: 0.5;
}
#toTop a:hover {
	opacity: 1;
}