【jQuery】scrollTopとanimateでナビゲーションをつくる！

シュテル(@sterchannel2020)です！

確かに覚えたscrollTopとanimateメソッドでいけそうです。やってみましょう！

ナビゲーションを作り任意の場所へ飛ばす流れ

#プログラミング #jQueryメモ　

◎ナビゲーション作りページ内の任意点に飛ばす

・各ボタンはaタグ

・そのhref属性に飛び先のid名を指定

・クリックしたときにattrメソッドでhref属性の値を取得→offsetメソッドでその要素の位置を取得という流れ

— しゅてる@暗躍する人事 (@sterchannel2020) August 14, 2020

・各ボタンはaタグでつくる

・そのhref属性に飛び先のid名を指定する

・クリックしたときにattrメソッドでhref属性の値を取得する

・offsetメソッドでその要素の位置を取得する

・animateとscrollTopを使い動かす

という流れ になります。

ナビゲーションから任意点までスクロールさせる実際のコード

$('header a').click(function(){
ヘッダーのa要素をクリックした時
var id = $(this).attr('href');
クリックした要素のhref属性取得し変数idに
var position = $(id).offset().top;
idのトップからの距離取得
$('html,body').animate({scrollTop:position},500);
そこまで500ミリ秒でスクロール
});

— しゅてる@暗躍する人事 (@sterchannel2020) August 14, 2020

$(‘header a’).click(function(){

ヘッダーのa要素をクリックした時に、

var id = $(this).attr(‘href’);

クリックした要素のhref属性取得して変数idに代入

var position = $(id).offset().top;

その変数idの「トップからの距離」を取得

$(‘html,body’).animate({scrollTop:position},500);

その位置まで500ミリ秒でスクロールさせる

});

となります。

まとめ：これはそのままコピペで使おう

そろそろサイト作成を始めていきます。

まずはHTML&CSSで静的なサイトを目指しますが、ここは覚えておいてコピペで実装できたらいいなと思ってます。

ではまた！