「ページトップへ」といえば多くのサイトやブログで採用されているボタンの類で、画面最上部まで戻るためのリンクです。特に情報量が多く縦長になりがちなコンテンツでは重要なユーザー補助となります。
そんな「ページトップへ」ですが、以前は下記のようにID名を付けてリンクする事が一般的でした。
<body id="top"> ～～中略～～ <p><a href="#top" id="pagetop">ページトップへ</a></p>
これだけでもJSを使用してスムーズなスクロールとすれば動作としては問題無いのですが、URLの末尾に「#top」と付いてしまう事が欠点だったりします。付いたからといって特に悪い事も無いのですが、見た目がスマートではありません。そんな時、下記のようなjQueryで「#top」も付かず、スムーズなスクロールの「ページトップへ」リンクを作成する事が出来ます。
$(function() {
$('#pagetop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
これにより「#pagetopをクリックするとページ最上部にスクロールする」という動作になります。500という数値を増やすとスクロールスピードが遅くなります。スマートな「ページトップへ」はjQueryで再現しましょう。
