jQueryで作るヌルヌル動くページスクロール

Get on moving By: Matthias Ripp

同じページ内のコンテンツに移動させるためのページ内遷移も、最近ではアニメーション無しのものの方が珍しくなってきています。

当ブログでもアニメーション付きのページ内遷移を行うべく、ページスクロールの処理を作成しましたので紹介します。

ヌルヌル動くページスクロール
  1. ページスクロールのデモ
  2. jQueryのソースコード

ページスクロールのデモ

クリックすると画面下部に移動します。

PageScroll

jQueryのソースコード

jQuery
// 衝突回避用の無名関数
$(function(){
        // hrefが#で始まるaタグのクリックイベント
	$("a[href^=#]").click(function(){
		var hash = $(this.hash);	// クリックしたaタグのハッシュの要素を取得する
        
		// ハッシュが"#noscroll"の場合は、スクロール処理を行わない
        	if($(hash).selector == "#noscroll") return false;
		
		// ハッシュの要素の位置を取得
		var offset = $(hash).offset().top;
		// ハッシュの要素の位置まで移動
		$("html,body").animate({scrollTop: offset}, 800);
		// aタグによるページ遷移を回避
		return false;
	});
});
利用したjQueryの関数 / javascriptプロパティ
アニメーションを作成する
$('セレクタ').animate({
                    パラメータ1: 値1,
                    パラメータ2: 値2
                    }, ミリ秒);

自作のアニメーションを指定できる関数。

「width」や「opacity」「scrollTop」などいろいろなパラメータが設定でき、以下のようにパラメータを設定すると動きが与えられる。

「width : “200px”」 ・・・ 垂直方向に200px伸びる(縮む)
「opacity : 0.5」 ・・・ 50%まで要素の透明度が上がる(下がる)
「scrollTop : 0」 ・・・ ページの先頭に移動する
ハッシュを取得する
// URLの「#」以降を取得
location.hash

ハッシュ(URLの「#」を含む「#」以降の文字)を取得する。

URLが「http://webnonotes.com#hash」の場合は「#hash」を取得。

また、aタグに対して「.hash」と記載すればaタグの「href=abc#123」から「#123」が取得でき、「#」がなければ、’’(空文字)が返される。

位置を取得する
// 要素の上位置を取得する
$('セレクタ').offset().top
// 要素の左位置を取得する
$('セレクタ').offset().left
※「bottom」「right」はプロパティにないため、下位置と右位置は取得不可。

戻る

divider

Trackback URL

http://webnonotes.com/javascript-2/pagescroll/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>