jQuery スニペット

個人的によく使うスニペットなど。

ページの先頭へスムーススクロール

<div class="pagetop"><img src="images/common/pagetop.png"></div>

$(function(){
	$('.pagetop img').click(function () {
		$('body, html').animate({scrollTop:0}, 500, 'easeOutExpo');
			return false;
	});
});

スクロールで表示させるといった特殊な機能はありません。
jQuery Easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ページ内リンクへスムーススクロール

$('a[href^=#]').click(function() {
	var speed = 500;
	var href= $(this).attr('href');
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top;
	$('body,html').animate({scrollTop:position}, speed, 'easeOutExpo');
		return false;
});

jQuery Easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ブロック要素全体にリンク

リンク（アンカータグ）を含むブロック要素全体にリンクをはります。

$('.selector').hover(function(){
	$(this).stop().fadeTo(300,0.5).css('cursor','pointer');
},function(){
	$(this).stop().fadeTo(300,1);
}).click(function(){
	window.location = $(this).find('a').attr('href');
	return false;
});

2行目でブロック要素の背景色を50％フェード、
カーソルをポインタに変更し、4行目で戻します。
6行目で内部のリンクを探し、クリックでページを移動します。

ウィンドウサイズの取得と判定と処理

ウィンドウがリサイズされた時にウィンドウサイズを取得し、768px以下だった場合の処理と、条件に当てはまらなかった場合の処理。

$(window).resize(function(){
    if ( $(window).width() <= 768) {
        $('#f-nav').css('text-align','left');
    } else {
        $('#f-nav').css('text-align','center');
    }
});
								 

liのdisplayをinline-blockに指定しておき、通常中央寄せ、2行になる場合左寄せにする時に使いました。