忘れないうちにJSのスクロール関係。

2015-10-14

こんにちは、氷翠です。

しばらくのどが痛いとか、鼻水がひどいとか続いているので、更新ができなかった。
というか、元気なんだけど、体もだるくないし、熱もない。
ただただ、せきがでてきて、鼻水が出てくる。
そんな状態なんで、映画にもいけない。
とりあえず、仕事はしている。

そんな中で、忘れないうちに、ちょいちょい使うスクリプトをメモしておこうと。

$("a").click(function(){
    var a = $(this).attr("href");
    var p = $(a).offset().top;
    $('html,body').animate({ scrollTop: p }, 'slow');
    return false;
});

リンクをクリックすると画面があスクロールしていくやつ。
普通でいけば、「<a href=”#xxx”>xxx</a>」とかやるかと思います。
そして、ID設定してあるAタグのところにジャンプうする感じですが、これを使うとスクロールします。
２行目のところでリンク先を取得し、３行目でその座標を特定。
４行目でスクロールさせる。
５行目でジャンプしないようにします。これがなかったら、スクロールした後に、さらにジャンプしようとするので、それを防ぐ。
また、変数aの中身というのは、通常はURLです。なので、#のついた文字列かどうかを判断させれば、どんな場面でもすぐに流用できます。

あ、もちろん、このスクリプトはJquery利用時でのこと。