【jQuery】ページ内リンク(スクロール)


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名でもクラス名でも動くようになっています。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です