ページ内リンク（アンカーリンク）でスムーズに移動させる（絶対URL・相対URL対応）

ページ内リンク（アンカーリンク）は基本的に【<a href=”#link”>】といった感じで指定しますが、たまにグローバルナビやフッターのリンクなど全ページ共通箇所でリンクを指定している場合があります。

そういった場合、相対パスで各ページに書くのは非常に面倒。
例えばワードプレスなんかだと、サイトURLを吐き出す関数と併せて、絶対URLで記述すると思います。

ただ、よくあるjQueryなんかだと、絶対URLに対応していないことがあります。
単純ですが、絶対URLだろうが相対URLだろうが、#で始まるアンカーが含まれていれば、そこに対してスムーズに移動させるjQueryが以下。

$(function() {
	$('.js-anchor').click(function() {
		var speed = 500;
		var href= $(this).attr("href");
		var target= href.substr(href.indexOf('#'))
		var target2 = $(target == "#" || target == "" ? 'html' : target);
		var position = target2.offset().top;
		$('body,html').animate({scrollTop:position - 80}, speed, 'swing');
		return false;
	});
});

※【scrollTop:position – 80】の80部分は任意。