[jQuery] jQueryオブジェクトに独自関数（メソッド）を追加する

ティコ    WordPress備忘録     javascript, jquery, 独自関数, 登録

jQueryオブジェクトに自作した関数を追加（登録？）する方法を調べましたのでメモ。

jQuery.extend(jQuery.fn, {
	function_name: function() {
		var pos = jQuery(this).position();
		alert("left: " + pos.left + "px top: " + pos.top + "px");
	}
});

jQuery.extendで登録する感じです。
登録した後は以下のように使えます。

jQuery(object).function_name();

拡張性が高くて便利ですねぇ。改めて感心しました。

[ 追記 ]
この場合は、　jQuery.fn.extend　を使用する方が良いみたいです。

jQuery.fn.extend　「jQueryエレメントに独自の新しいメソッドを追加する」
jQuery.extend　「jQuery名前空間に新たなメソッドを追加する」
という違いがあるみたいです。

[jQuery] ページ内をスムースにスクロールする

ティコ    WordPress備忘録     jquery, wordpress, スクロール, スムース, ページ内

WordPressについて、というよりはホームページ作成での便利な事ですが…。

ここの記事を参考にしてページ内をスムースにスクロールする関数を作成しました（ほぼ丸写しですけど）。

使用条件としては必ずjQueryが読み込まれている事です。

// Easingの追加
jQuery.easing.quart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

/*-------------------------------------
 ページ読み込み中
-------------------------------------*/
jQuery(document).ready(function(){

	//
	// <a href="#***">の場合、スクロール処理を追加
	//
	jQuery('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = jQuery(this.hash);
			$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
				return false;
			}
		}
	});

});

これで後は、

<a href="#header">TOPに戻る</a>

のようにhref属性にページ内リンクを貼るとスムースにスクロールするようになります。
結構面白いです。