ページトップへのアンカーリンクを任意の箇所に自動表示させ、アンカーリンクをクリックするとイイ感じにスクロールアップします。
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の記述例
特に無いですが、縦長のページであれば良いと思います。
