ページ内リンク(アンカーリンク)は基本的に【<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部分は任意。