プロゲート【JQuery上級-#3アニメーション、ページ内移動-】scrollTop,animate,offset,attr

prorate:JQuery上級コース　その3

アニメーション実装

アニメーションをつけるにはanimateメソッドを用います。$(‘セレクタ’).animate({‘プロパティ’:’値’})のように、引数は連想配列で指定します。
2つ目の引数でアニメーションの時間を設定することができます。時間は下図のようにミリ秒で指定するか、’slow’や’fast’といった文字列で指定することができます。-progate-

$(‘セレクタ’).animate({

'プロパティ':'値'

}, 速度);

 $('.social-icon').hover(
    function(){ //引数1
    $(this).animate({
    'font-size':'30px'
    },300);
    //マウスを乗せた時
  },
    function(){ //引数2
    $(this).animate({
    'font-size':'24px'
    },300);
    //マウスを外した時
  }
  );

ページ内リンク

aタグでのページ内リンク

タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできます。リンクの飛び先にidを指定し、タグのhref属性に”#id名”と”ると、タグをクリックするとそのidの要素が表示されている場所まで移動するようになります。-progate-

<a href=“#contact”>
お問い合わせ
</a>

<div id=“contact”>
</>

scrollTopメソッド

scrollTopメソッドは、$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができます。
scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておきましょう。-progate-

$('html, body').scrollTop(0); 

スクロールにアニメーションをつける

$('html,body').animate({
		'scrollTop':0　//一番上に戻る、セミコロン不要
	}, 'slow'); //速度

ナビゲーション作成

offsetメソッド

offsetメソッドを使用することで、要素の表示位置を取得することができます。offsetメソッドは、右の図のようにページの上端からの距離とページの左端からの距離が連想配列の形で返ってきます。
offset().topとすると、ページの上端からの距離が取得できます。-progate-

$(‘h1’).offset(); // h1の表示位置の取得

$(‘h1’).offset().top();　//ページ最上部から、h1までの距離の取得

attrメソッドで飛び先を取得

var id =$(this).attr(‘href’); // クリックしたボタンのhrefを取得

var position = $(id).offset().top; // 飛び先の最上部からの距離の取得

ナビゲーションの完成形

 $('header a').click(function(){
    var id= $(this).attr('href');
    var position = $(id).offset().top;
    
    $('html, body').animate({
      'scrollTop':position
      
    }, 500);