jQueryを使った特定要素までの簡単スムーススクロール

なんて定番な記事を書いているんだろうと恥ずかしく思いながら、せっかく書いたんだから公開はしておこうと思い戸惑いながら公開ボタンを押下しました。

前置きは置いておいて、本題ですがjQueryを使えば、動きのなめらかなスムーススクロールを簡単に実装できます。今回は、スムーススクロールの原理について紹介します。

デモ

まずはスムーススクロールがどんなものなのかについてですが、Webサイト内でよく見かけるページ内アンカーに利用したサンプルを用意しました。下に移動のボタンをクリックしてみてください。

単純なアンカーリンクよりスムーズにスクロールすることで、どこに移動したのかがわかりやすくなります。

サンプルコード

HTML

aタグをターゲットにしhref属性に移動先となるidを指定します。ページ内に複数指定可能です。

<div id="sampleBlock01" class="sample noNav">
	<p>サンプル文章です。スクロールのためのスペース確保を目的としています。</p>
	<ul class="link">
		<li><a class="scrollAnchors" href="#sampleBlock02">下に移動</a></li>
	</ul>
</div>

<div id="sampleBlock02" class="sample noNav">
	<p>サンプル文章です。スクロールのためのスペース確保を目的としています。</p>
	<ul class="link">
		<li><a class="scrollAnchors" href="#sampleBlock03">下に移動</a></li>
	</ul>
</div>

<div id="sampleBlock03" class="sample noNav">
	<p>サンプル文章です。スクロールのためのスペース確保を目的としています。サンプル文章です。</p>
	<ul class="link">
		<li><a class="scrollAnchors" href="#sampleBlock01">最初に戻る</a></li>
	</ul>
</div>

JavaScript

jQueryを利用し、クリックされたときに、ターゲットとなる要素の位置をoffset().topで取得します。
また、スムーススクロールではbodyのscrollTopの値を操作してスクロールの状態を変化させます。
アニメーションが重複して起こらないようにするためstop()を使います。

var $anchors = $(" a[href^='#']");
var $doc     = $($.browser.safari ? 'body' : 'html');
var speed    = 600;
		
$anchors.each(function(){
	var $anchor   = $(this);
	var anchorID  = $anchor.attr("href");
	var $target   = $(anchorID);
			
	$anchor.click(function(e){
		var targetPositionTop = $target.offset().top;
		
		$doc.stop().animate({
			scrollTop: targetPositionTop
		},
		{
			duration : speed
		});
		
		return false;
	});
});

クリックイベントの最後に指定されているretun falseは、本来のリンクの処理をキャンセルさせるためのものです。

簡単に実装できますね。
easingを指定することで、よりスムーズに見せることもできます。

Easingを使いたい時に

easingを追加したい場合、jQuery Easing Pluginがオススメです。

• jQuery Easing Plugin

この記事は「jQueryを使った特定要素までの簡単スムーススクロール」の転載です。