最近よく使うのでコピペ用に。
CSSは大事なとこだけメモ。

ヘッダー固定・追尾

ヘッダーのロゴはそのまま上に残してナビゲーションだけ追尾してくるタイプ。
一番上まで戻るとロゴがまた出てくる。
固定した事によりアンカー位置がずれないように注意。

デモ01

html

	
ロゴ
	

css

header nav{
	height:45px;
}
.fixed{
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
}

js

$(function() {
	var nav = $('nav ul');
	var navTop = nav.offset().top;
	$(window).on('load scroll', function(){
		  if ($(this).scrollTop() > navTop) {
		  	nav.addClass('fixed');
		  }else{
		  	nav.removeClass('fixed');
		  }
	});
});


//スクロール用
$(function(){
	var nav_H = $('nav').height();/*ナビの高さ取得*/
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - nav_H;/*ナビ分の高さをずらす*/
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

ページトップ追尾ボタン(固定バージョン)

「ページトップ」のボタンが右下に固定表示されるやつ。
スクロールが一番上にくると消える。

デモ02

html

TOPへ戻る

css

#pagetop{
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index:1000;
}

js

$(function() {
	var topBtn = $('#pagetop');	
	topBtn.hide();
	$(window).on('load scroll', function(){
		if ($(this).scrollTop() > 100) {/*100は表示されるタイミングを適当に*/
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
});

フッターで止まるページトップ追尾ボタン

基本は上と同じだがフッターエリアにくると追尾が止まるパターン。
ポジションでやる方法もあるけどよくpagetopをfloat:rightで右に寄せちゃうからmargin指定で追尾するやつ。

デモ03

html

TOPへ戻る

css

#pagetop{width:100%;}
#pagetop a{
	display:block;
	float:right;
}

js

$(function() {
	var pagetop = $('#pagetop a');
	var pagetopH = $('#pagetop a').outerHeight();
	var navBottom = pagetop.offset().top;
	
	pagetop.hide();
		
	$(window).on('load scroll', function(){	
		var pagetopA = $(window).outerHeight() + $(this).scrollTop() - pagetopH;
		var pagetopD = pagetopA - navBottom;
		if (navBottom >= pagetopA) {
			pagetop.css('margin-top',pagetopH*-1+pagetopD+'px');
		} else {
			pagetop.css('margin-top',pagetopH*-1+'px');
		}
		
		/*トップに来たらフェードアウト*/
		if ($(this).scrollTop() > 100) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	
});

jQuery

• 
• Tweet