jQueryで遊んでみるその7

Home » Tech&Tips » jQueryで遊んでみるその7

jQueryで遊んでみるその7

Posted by: かむ Posted date: 5月 19, 2010 | 4 Comments

このシリーズだとアクセス数がめっきり減るけどめげないで続けてみる。

前回登場のanimateを使って、
ページ内リンクでの移動をアニメーションでやってみる。
これよくあるよね。

この程度ならプラグインを使わなくても
そこそこ簡単にjQueryのメソッドだけで実装出来るのだ。
自力で書いてみてこそオトコというものだ。

まずはサンプル ※詳しくはソース見て

サンプル1

これは、リンク先のターゲットと
クリックイベント用のクラスを手動で指定してます。

面倒なのでこんな風に変えて見た。

$('a[href*=#]').click(function(){

として、#◎◎となっているリンクエレメントを
まとめてクリック判別出来るように記述

var targetTo = $(this.hash);
var targetOffset = targetTo.offset().top;

クリックされたリンク先のハッシュを抜き出して、移動先の位置を取得。

せっかくなので、これも前回登場のeasingプラグインを使って
派手な動きをしてみたサンプル。