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

プログラミング
Photo by Max Chen on Unsplash

シュテル(@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で静的なサイトを目指しますが、ここは覚えておいてコピペで実装できたらいいなと思ってます。

ではまた!

タイトルとURLをコピーしました