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;
	});	
});

スクロールで表示させるといった特殊な機能はありません。
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;
});

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行目で内部のリンクを探し、クリックでページを移動します。

コメントを残す