シュテル(@sterchannel2020)です!

ページ上部のメニューをクリックした時にその場所までガーッとスクロールするやつがそろそろ作れる気がする…
確かに覚えたscrollTopとanimateメソッドでいけそうです。やってみましょう!
ナビゲーションを作り任意の場所へ飛ばす流れ
・各ボタンは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ミリ秒でスクロールさせる
});
となります。
まとめ:これはそのままコピペで使おう
そろそろサイト作成を始めていきます。
まずはHTML&CSSで静的なサイトを目指しますが、ここは覚えておいてコピペで実装できたらいいなと思ってます。
ではまた!