【jQuery】ページ内リンク（スクロール）

Tweet

baseタグで相対パスの URI が指定されたサイトで、ページ内リンクを貼りたかったのですが

<base href="http://ooo.oo">

<a href="#id">ページ内リンク</a>

上記のように aタグで行うと、base で指定されたURL「http://ooo.oo/#id」にアクセスしてしまいます。
そこで、jQuery のスクロール機能を使い実装しました。

■ jQuery

<script type="text/javascript">
function scrollAttribute(attr){
    var p = $(attr).offset().top;
    $('html,body').animate({scrollTop:p}, 'slow');
}
</script>

■ HTML

<a href="#id" onClick="scrollAttribute('#id');return false;"></a>

<div id="id">
リンクさせたい箇所
</div>

aタグ側の「href=”#id”」は指定する必要がないため「href=””」などと空にしても良いですが、リンク先として表示されるようにしています。（ブラウザ依存）

引数で属性値を渡せるようにしていますので、「#id」や「.class」など、ID名でもクラス名でも動くようになっています。

Tweet