Подключите этот код к файлу со скриптами на вашей странице или создайте отдельный файл .js с этим кодом и подключите его к странице:

(function($){
/* использование: <a class='scrollTop' href='#' style='display:none;'></a>
------------------------------------------------- */
$(function(){
	var e = $(".scrollTop");
	var	speed = 500;
	e.click(function(){
		$("html:not(:animated)" +( !$.browser.opera ? ",body:not(:animated)" : "")).animate({ scrollTop: 0}, 500 );
		return false; //важно!
	});
	//появление
	function show_scrollTop(){
		( $(window).scrollTop()>300 ) ? e.fadeIn(600) : e.hide();
	}
	$(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
});
})(jQuery)

Стили для фиксированого позиционирования и указания картинки

<style type="text/css">
	.scrollTop{
		background:url(arrows2.png) 0 0 no-repeat;
		display:block; width:50px; height:50px;
		position:fixed; bottom:10px; left:47%;
		z-index:2000;
	}
	.scrollTop:hover{ background-position:0 -58px; }
</style>

Вместо arrows2.png нужно указать путь к картинке, которая для данного примера выглядет так:

Последний штрих

Чтобы все заработало нужно вставить этот код в любое место страницы (желательно в самом конец, в подвал):

 <a class='scrollTop' href='#' style='display:none;'></a>
Источник:  loco.ru