スムーズスクロール『jQuery』の実装

K's

2020年7月6日 22:20

1. はじめに

今回、実装したスムーズスクロールはページないリンクをクリックして移動するアニメーションです。

自身が理解するために作成しましたので見た目はダサイです。

画面収録 2020-07-04 6.34.24.mov

2. 読み込むファイルを記述

今回はこの様な感じでファイル、フォルダ分けしてあります。

cssファイルと今回はアイコンを使用しましたので『fontawesome』のCDNも記述します。

<!-- index.html -->

 <head>
   <link rel="stylesheet" media="(min-width: 640px)" href="css/style.css">
   <link rel="stylesheet"  href="css/reset.css">
   <!-- アイコン -->
   <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
 </head>

jQuery読み込みも記述します。

<!-- index.html -->

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
   <script src="js/script.js" ></script>
 </body>

3. HTMLを記述

   <!-- ヘッダーエリア --> 
　　<div class = "header">
     <!-- グループ１ -->
     <a href="#group-1" class = "link-title">
       <i class="far fa-user">
         グループ1
       </i>
     </a>
     <!-- グループ２ -->
     <a href="#group-2" class = "link-title">
       <i class="fas fa-user">
         グループ2
       </i>
     </a>
     <!-- グループ３ -->
     <a href="#group-3" class = "link-title">
       <i class="fas fa-user-friends">
         グループ3
       </i>
     </a>
     <!-- グループ４ -->
     <a href="#group-4" class = "link-title">
       <i class="fas fa-users">
         グループ4
       </i>
     </a>
   </div>

   <!-- コンテンツエリア -->
   <div class = "content">
     <div id="group-1" class = "inline-content">
       テキスト１
     </div>
     <div id="group-2" class = "inline-content">
       テキスト２
     </div>
     <div id="group-3" class = "inline-content">
       テキスト３
     </div>
     <div id="group-4" class = "inline-content">
       テキスト４
     </div>
   </div>

4. CSSを記述

/* style.css */

.header{
 height: 100px;
 width: 100vw;
 background-color: white;
 box-shadow: 0 0 5px rgba(162, 162, 162, 0.571);
 display: flex;
 justify-content: space-between;
 position: fixed;
 top: 0;
}
.link-title{
 height: 100%;
 width: 200px;
 line-height: 100px;
 text-align: center;
 color: #000;
 font-size: 20px;
 text-decoration: none;
}
.link-title:hover{
 opacity: 0.7;
}
.content{
 height: 100%;
 width: 100%;
 margin-top: 120px;
}
.inline-content{
 height: 500px;
 width: 90%;
 box-shadow: 0 0 5px rgba(162, 162, 162, 0.571);
 margin: 20px auto;
}

5. JSを記述

//script.js

$(function(){
 // #で始まるアンカーをクリックした場合に処理
 $('a[href^="#"]').click(function() {
   // スクロールの速度
   var just = 105;                                               // 移動先を上にずらす
   var speed = 400;                                              // ミリ秒で記述
   var href = $(this).attr("href");                              // アンカーの値取得
   var target = $(href == "#" || href == "" ? 'html' : href);    // 移動先を取得
   var position = target.offset().top - just;                    // 移動先を数値で取得
   // スムーススクロール
   $('body,html').animate({
     scrollTop: position
   },speed, 'swing');
   return false;
 });
});

・『a[href^="#"]』は、# で始まるリンクをクリックした時の意味。

・var just = 105; は、今回『top』から105pxずらすために定義する。

・var href = $(this).attr("href");は、『href』の『HTML要素の属性』を取得する。

・var target = $(href == "#" || href == "" ? 'html' : href); は、『var href』で取得した値が『#』か『空白』だったら’html’をそれ以外だったら取得した'href'属性の値を格納する。

・・var position = target.offset().top - just; はtarget.offset()は、位置の値を取得する。’html’の場合’０’を取得、、、'href'だったらページのリンク先の位置『例えば'360'など』を取得する。

・scrollTop: position は、『scrollTop:』はスクロール量「位置」を取得する。

・ 'swing' は、アニメーション→『http://semooh.jp/jquery/cont/doc/easing/ 』

・return false; //falseを返すことでURLに影響を与えない。

6. 最後に

この様になれば完成です。