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