jQuery Progate　上級　１５～１８まで(全１８)

１５．アニメーションをつける

これは正直とても簡単で楽しいです！

animateメソッドを利用。　

以下jQuery

 $('h1').animate({
   'font-size': '30px'
 }, 300);

フォントサイズを　30px　にする　300ミリ秒　という意味。

これにhoverイベントを掛け合わせるとアニメーションになる。

以下

  $('.social-icon').hover(
   function(){
     $(this).children('span').animate({
       'font-size':'30px'
     }, 300);
   },
   function(){
     $(this).children('span').animate({
       'font-size':'24px'
     }, 300);
   }
 );
 

１６．ページ内リンクを作る

長いページには「トップに戻る」といったページ内のリンクがある。

htmlだと

<a href="#contact">こちら</a>
<div id="contact" ></div>

href の値を「＃」＋「id名」にすると　#contactをクリックするとid="contact"に飛んでいく。

【scrollTopメソッド】

jQueryだとアニメーションで上記ができる。

$('#top-btn').click(function(){
   $('html, body').scrollTop(0);
   
});

scrollTop(0);　は　スクロールされている部分の距離が０＝ページの最上部

$('html, body')　は
$('html').scrollTop(0);
$('body').scrollTop(0);
の２桁と同じ

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

cssの値だけでなく、scrollTopなどの値も変更できる。

以下jQuery

$('html, body').animate({
   'scrollTop': 0
}, 'slow');

１８．ナビゲーションをつくる

【offsetメソッド】

以下で h1位置の要素表示を取得

$('h1').offset();

以下でページ最上部の位置からh1要素の距離を取得

$('h1').offset().top;

【attrメソッドで飛び先を指定】

以下html

<a  class="scroll-btn" href="#html">
 HTML
</a>

<div id="html" >
</div>

hrefの値を　＃　と　html　にする　＝＞　そして　id=html　でとび先と紐づける。

以下ｊQuery

$('scroll-btn').click(function(){
   var id = $(this).attr('href');
   var position = $(id).offset().top;
});

クリックされたスクロールボタンの要素(href)を取得して、

var id = $(this).attr('href')

hrefのidの箇所の一番上に飛んでいく

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

以下、トップボタンへ戻る

// トップへ戻るボタン
 $('#top-btn').click(function(){
   $('html, body').animate({ 
     'scrollTop': 0 
   }, 500);
 });

ヘッダー内で<a>タグをクリックしたときのclickイベントは以下。

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

※スクロールをしてpositionにセットしている。

これでjQuery上級編はおしまい。