下へスクロールすると現れるページトップへ戻るボタンをjQueryで作ってみました。

矢印のボタンをクリックすることで、ページトップへ戻ります。

↓以下が実際のソースサンプルです。

<script>
		$(function () {
			//以下、ページトップへ戻るボタンをスクロールに合わせてfadeIn、fadeOut
			$(window).on("load scroll", function () {
				var $this = $(this);

				if ($this.scrollTop() > 50) { //50pxスクロールした時
					$("#pageTop").stop();
					$("#pageTop").fadeTo(100, 1);
				} else {
					$("#pageTop").stop();
					$("#pageTop").fadeTo(100, 0);
				}
			});

			//以下、スムーズスクロール
			$("a[href^='#']").click(function () {
				var href = $(this).attr("href"),
					target = 0,
					targetTop = $("body").offset().top;

				if (href === "#") {
					$("body,html").animate({
						scrollTop: targetTop
					}, 700, "swing");
					return false;
				} else {
					target = $(href).offset().top;
					$("body,html").animate({
						scrollTop: (target - 25)
					}, 700, "swing");
					return false;
				}
			});
		});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#main {
			width: 960px;
			height: 1500px;
			border: 1px solid #000;
			margin: 0 auto;
			overflow: hidden;
		}

		#pageTop {
			position: fixed;
			bottom: 0;
			left: 50%;
			width: 55px;
			height: 55px;
			margin-left: 425px;
			background-image: url(image/arrow.png);
			background-size: cover;
		}

		#pageTop a {
			display: block;
			width: 100%;
			height: 100%;
		}
</style>

<div id="main">
	<div id="pageTop">
		<a href="#"></a>
	</div>
</div>

デモページは、こちら