jQuery「scrollTop」でページ内リンクのスムーススクロール

ランディングページ（LP）では、どこのサイトでも使用されているページ内リンクでのスムーススクロール。
ページ内はもちろん、別ページからの遷移時にも使用することも多いので、実装方法をメモ。

HTML

<nav>
<ul>
<li><a href="#target01">○○○○/a></li>
<li><a href="#target02">○○○○</a></li>
<li><a href="#target03">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
</ul>
</nav>
…
<main>
<article>
<section id="target01">遷移先のコンテンツ部分01</section>
<section id="target02">遷移先のコンテンツ部分02</section>
<section id="target03">遷移先のコンテンツ部分03</section>
</article>
</main>
…

遷移先のリンクをハッシュタグ（#）で、コンテンツ部分を「id」で設定。

jQuery

//ページ内での移動
$('header nav ul li a').click(function(){
	var $href = $(this).attr('href');
	if($href.indexOf('#') >= 0) {
		var hashary = $href.split('#');
		var position = $('#'+hashary[hashary.length -1]).offset().top;
		$('body,html').animate({scrollTop:position}, 500, 'swing');
		return false;
	}
})

//外部ページからの移動
$(window).load(function(){
	var $hash = location.hash;
	if($hash != ''){
		var position = $($hash).offset().top;
		$('body,html').animate({scrollTop:position}, 500, 'swing');
		return false;
	}
})

「attr(‘href’)」または「location.hash」で遷移後のURLの#以下の値を取得。
値がある場合に限り「scrollTop:position」で取得値が設定されているタグの冒頭に移動。
「$(window).load(function(){」とページ読み込み後に処理を行うのは、画像の高さを取得してからでないと、移動位置がずれるため。

ヘッダー部分を固定している場合は「var position」の値から固定部分の値をマイナスする。

// ○○pxと値が分る場合
var position = $($hash).offset().top - ○○px;

// 値が変わる（不定）の場合○○○○と指定タグで取得する
var position = $($hash).offset().top - $('○○○○').height();

• SOCKSTAR(ソックスター)