スムーズにこう、スゥーっと移動してよ。
TOPに戻るとかスゥーっと移動するやつ結構ありますよね。
そいつについてです。
今回の内容
- ・スムーススクロールさせる
スムーススクロール
とりあえず実装してみますか。
次の要素へリンク
先頭へ戻るリンク
$('a[href^=#]').bind('click',function() { var speed = 400, href= $(this).attr("href"); targetElem = $(href == "#" || href == "" ? 'html' : href); position = targetElem.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; });
ソースの解析
まず、クリックイベントを付与させる要素についてですが
セレクタで判断しており
【aタグでhrefがシャープで始まるもの】
の条件に合致した場合、動作させるようになっています。
処理の内容を簡潔に書くと
1:飛び先のID名を取得する
2:飛び先の要素を指定する。
謎な記述方法をしていますが、これはif文の中でも三項演算子と呼ばれる書き方です。
言葉に表すと
href変数の中身が#または空の場合はhtml文字列を出す
そうでない場合は、hrefの中身を出す。
つまり
href変数の中身が#または空の場合はhtmlタグをターゲットにする。
そうでない場合は、hrefの中身(指定されたIDの要素)をターゲットにする
の意味合いとなります。
3:指定要素の表示位置(サイト先頭から見て何pxの位置にいるのか)を取得
4:現在の位置から指定位置までアニメーションを使ってスクロールバーを移動させる
5:aタグの遷移をキャンセルする。
補足:aタグにクリックイベントを付ける時は
テキストリンクって基本的にクリックすると、遷移しますよね
JSの場合、それが非常に邪魔になる時があります。
例えば
1:hrefの中身を別ウインドウで表示させたい
2:aタグでクリッカブルなものとしてマークアップしてるけど、遷移も何もせずにJSで何か処理させる
この2パターンが非常に多いです。
ではどんな風に回避するのでしょうか
hrefの中身を別ウインドウで表示させたい
JSの動作とリンク遷移の動作の順番は、
js→リンク遷移、の順番となります。
hrefの中身を別ウインドウにした場合、そのまま書いちゃうと
別ウインドウ表示→元のページも遷移が走ってしまう。
となります。
そこで出てくるのが処理最後の
return false;
こいつを付けることで、【これ以上何も処理しない】となり、リンクの遷移動作も行われる事がなくなります。
aタグだけど遷移も何もせずにJSで何か処理させる
上記のように、return false;をつけるのもよいのですが、もっと楽なのは
href要素に javascript:void(0); と記述することです。
何を意味しているのかと言うと、javascriptのコードを動かしますよ(javascript:)。でも特に何もしない(void(0))
って事です。
外部リンクのスムーススクロール
外部リンクでもスムーススクロールを使えたりします。
つまり、ページ読み込み時にスゥーっと移動してくれるヤツです
上記のクリック処理と併せてこっちも書いておくとよいですよね。
最適化も一緒にしてしまったソースですが以下
var scrollTarget = location.hash, // スクロールしたい要素情報 targetElem = $(scrollTarget), // 要素情報を参考にエレメントを取得 dafaultSpeed = 400, // デフォルトのスピード dafaultEasing = 'swing'; // デフォルトのeasing名 // スクロール位置を一番上にしてからスクロール処理の開始 // スクロール位置をリセットしないと、その場所へ飛んでしまうので。 window.scroll(0,0); scrollPage(targetElem,dafaultEasing,dafaultSpeed); //*********************************** // ページ内リンククリックイベント //*********************************** $('a[href^=#]').bind('click',function() { scrollTarget = $(this).attr("href"); targetElem = $(scrollTarget == "#" || scrollTarget == "" ? 'html' : scrollTarget); scrollPage(targetElem,dafaultEasing,dafaultSpeed); return false; }); /******************************************** * * scrollPage * スムーススクロールさせる。 * * @pram targetElem スクロール先のエレメント * @pram easing easingの名前 * @pram speed スクロール移動時間 * * @return none * ********************************************/ function scrollPage(targetElem,easing,speed) { // 存在しない要素へのハッシュが指定されている場合はスクロール処理をストップ if(targetElem.offset() === undefined) return false; var position = targetElem.offset().top; $('body,html').animate({scrollTop:position}, speed, easing); }
ソースのコメント通りです。
遷移してみれば分かる!外部遷移でのスムーススクロール