[jQuery]ヘッダー固定時のページ内リンク+外部アンカーリンク処理

Reading Time: 1 minute

検索して拾ったもの、間違ってたり足りてなかったりでそのままじゃ動かないのばっかでもうほんと、アレですね。

Contents

1 ライブラリ
2 ページ内リンク
3 別ページからのアンカーリンク
4 まとめ

ライブラリ

一定以上のバージョンだと動かない。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

ページ内リンク

スムーススクロール込み。

$(function(){
	//ページ内スクロール
	var headerHeight = $('header').innerHeight();
	jQuery('a[href^=#]').click(function() {
		var speed = 500;
		var href= jQuery(this).attr("href");
		var target = jQuery(href === "#" || href === "" ? 'html' : href);
		var position = target.offset().top - headerHeight;
		jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
		return false;
	});
});

$(function(){

//ページ内スクロール

var headerHeight = $('header').innerHeight();

jQuery('a[href^=#]').click(function() {

var speed = 500;

var href= jQuery(this).attr("href");

var target = jQuery(href === "#" || href === "" ? 'html' : href);

var position = target.offset().top - headerHeight;

jQuery('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

});

別ページからのアンカーリンク

「href=”xxx.html#***”」じゃなくて「href=”xxx.html?id=***”」で指定すること。

$(window).on('load', function(){
	var headerHeight = $('header').innerHeight();
	var url = $(location).attr('href');
	if(url.indexOf("?id=") !== -1){
		var id = url.split("?id=");
		var target = $('#' + id[id.length - 1]);
		if(target.length){
			var position = target.offset().top - headerHeight;
			jQuery('body,html').animate({scrollTop:position}, 400);
		}
	}
});

$(window).on('load', function(){

var headerHeight = $('header').innerHeight();

var url = $(location).attr('href');

if(url.indexOf("?id=") !== -1){

var id = url.split("?id=");

var target = $('#' + id[id.length - 1]);

if(target.length){

var position = target.offset().top - headerHeight;

jQuery('body,html').animate({scrollTop:position}, 400);

}

});

まとめ

「href=”xxx.html#***”」でもやれそうな気もするんだけど、修正するだけで疲れた。
その気になったら調べて試してみる。