【解放区在住氷翠 緑の閃光】氷翠のお気楽日記

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

2015-10-14 15:31

javascript > Jquery > 開発

こんにちは、氷翠です。

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

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

$("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タグのところにジャンプうする感じですが、これを使うとスクロールします。
2行目のところでリンク先を取得し、3行目でその座標を特定。
4行目でスクロールさせる。
5行目でジャンプしないようにします。これがなかったら、スクロールした後に、さらにジャンプしようとするので、それを防ぐ。
また、変数aの中身というのは、通常はURLです。なので、#のついた文字列かどうかを判断させれば、どんな場面でもすぐに流用できます。

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

コメントを残す

メールアドレスが公開されることはありません。