2013年10月19日

jQueryでスマートな「ページトップへ」リンクを作る

「ページトップへ」といえば多くのサイトやブログで採用されているボタンの類で、画面最上部まで戻るためのリンクです。特に情報量が多く縦長になりがちなコンテンツでは重要なユーザー補助となります。

そんな「ページトップへ」ですが、以前は下記のように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で再現しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です