2012/03/29

Tag : ,

ページ内スクロール。アンカーのように”id”を指定するだけです。

前回のメモ、「ページ上部にスクロールしながら戻る。」の拡張版です。
ページ内のアンカーへの移動は、一瞬で位置が切り替わることもあり迷子になる可能性がありました。なので、あまり好んで使用はしてこなかったのですが、スクロールしながら指定位置（アンカー）まで移動ができるのであれば迷子も少なくなるのではないかと思い調べてみました。

先にサンプルを見た方が早いので説明はその後にどうぞ。
Sample

html

<div class="menu left">
	<ul>
		<li><a href="#0">top "#0"</a></li>
		<li><a href="#1">Anchor "#1"</a></li>
		<li><a href="#2">Anchor "#2"</a></li>
		<li><a href="#3">Anchor "#3"</a></li>
		<li><a href="#4">Anchor "#4"</a></li>
		<li><a href="#5">Anchor "#5"</a></li>
	</ul>
</div>
<div class="content left">
	<h2 id="1">Anchor "#1"</h2>
	<div class="w500"></div>
	<h2 id="2">Anchor "#2"</h2>
	<div class="w500"></div>
	<h2 id="3">Anchor "#3"</h2>
	<div class="w500"></div>
	<h2 id="4">Anchor "#4"</h2>
	<div class="w500"></div>
	<h2 id="5">Anchor "#5"</h2>
	<div class="w500"></div>
</div>

アンカー指定のようにaタグからのリンクは「#」付きのアンカー名を指定し、行き先の要素のidにアンカー名を指定します。
ex. アンカー名が「 1 」の場合、aリンクには「 #1 」、行き先要素のidには「 1 」ということですね。

jQuery

$('a[href*=#]').click(function() {
	var target = $(this.hash);
	//if (target.length) {
	if (target) {
		var targetOffset = target.offset().top;
		$('html,body').animate({scrollTop: targetOffset},400,"easeInOutQuart");
		return false;
		}
	});
  • $(‘a[href*=#]’)
    aタグのhref属性の値に「#」が含まれている要素を選択する。このコードの場合、属性値が「#」で始まる文字列でもいいので「$(‘a[href^=#]’)」でもいけるかな。
  • var target = $(this.hash);
    this.hash はaタグhref属性値（アンカー名なのかな）を返すようですので、$(this.hash) は $(“#1”) などと同じになりますね。target にはid=”1″のエレメントが入ります。
  • if (target.length) {
    指定したエレメントがあるかないかを判断しています。あれ？targetだけでよくないかな。。。と思って変更したら、「back to top」がうごかない。当たり前か。。「back to top」で指定したエレメントがないのでそうなりますよね。「back to top」のaリンクを「#0」にして解決です。これで 「 if (target) { 」でいけますね。
  • target.offset().top;
    指定エレメントの表示位置を返します。topの他にleftもあります。
  • $(‘html,body’).animate({scrollTop: targetOffset},400,”easeInOutQuart”);
    前回同様ですね。目標値は上で求めた変数を。

こんな感じですかね。また、別ページの指定位置までスクロールしたい場合は、
– ページ内スクロールがしたい（別ページ内リンク対応）
を参考にしてください。

5 / 8

Leave a Reply

Back to Top