by shigemk2

当面は技術的なことしか書かない

ページ内リンクをぬるぬる動かす

たとえばhttp://example.com/#testみたいなページ内リンクがあったとすると、
ページ内リンクをクリックすると、ページがぬるぬる移動するようにしたい。

するとこういう風に書く事が出来る。
たぶんポイントはhashメソッド。ロケーション(Location)
location.hashみたいな書き方をすることにより、URLのハッシュ部分を取り出す事が出来る。

<a class="hoge" href="#hoge">ここをクリック</a>
$('a.hoge').click(function() {
    // example.com/#hogeの部分を取り出し、
    var href    = $(this.hash);
    // #hogeの高さを取得し、
    var topHeight  = href.offset().top;
    
    // #hogeのところまでぬるぬる強スクさせる
    var target = $('html, body');
    target.animate({ scrollTop: topHeight }, { 'duration' : 700 }, 'easeInQuad');
    return false;
});

Jquery アンカー(ハッシュ)で処理を分ける-ITかあさん