jquery.scrollUp：ページトップへのアンカーリンクを任意の箇所に自動表示させるJs

ページトップへのアンカーリンクを任意の箇所に自動表示させ、アンカーリンクをクリックするとイイ感じにスクロールアップします。

1．CSSの記述例

<style type="text/css">
<!--
#idWrap{
	width:550px;
	margin:0 auto;
	text-align:center;
	height:4000px;
}
#scrollUp {
	bottom: 20px;
	right: 20px;
	background: #555;
	color: #fff;
	font-size: 12px;
	font-family: sans-serif;
	text-decoration: none;
	opacity: .9;
	padding: 10px 20px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-webkit-transition: background 200ms linear;
	-moz-transition: background 200ms linear;
	transition: background 200ms linear;
}
#scrollUp:hover {
		background: #000;
}
-->
</style>

scrollUpを調整すれば良い様ですね。

2．ヘッダーとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<script type="text/javascript">
/*
		$(function () {
			$.scrollUp();	//オプション無しでも良い様です。
		});
*/
		$(function () {
		    $.scrollUp({
		        scrollName: 'scrollUp', // Element ID
		        topDistance: '300', // Distance from top before showing element (px)
		        topSpeed: 300, // Speed back to top (ms)
		        animation: 'fade', // Fade, slide, none
		        animationInSpeed: 200, // Animation in speed (ms)
		        animationOutSpeed: 200, // Animation out speed (ms)
		        scrollText: 'PAGE TOP △', // Text for element
		        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
		    });
		});
</script>

スクロールスピード等をオプションで設定出来る様ですが、オプション無し（コメントアウトしてます）でも動作する様です。

3．HTMLの記述例

特に無いですが、縦長のページであれば良いと思います。

ページトップへのアンカーリンクを任意の箇所に自動表示させるデモ

ソース元：scrollUp jQuery plugin