jQueryで実装するスクロールについて
jQueryは、Webサイトに動きをつけることのできる言語です。
この記事では、Webサイトでよく見る
このような、クリックすると画面TOPに行くボタンをどうやって作ればいいのかについて説明しました。
jQueryを読み込む
jQueryのファイルを作成する
〇〇.jsというファイルを作成します。
今回は、「scroll.js」を作成しました。
htmlファイルのheadタグ内に2つの記述をする
1つ目 (jQueryを使うための準備)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
2つ目(scroll.jsを読み込むため)
<script src="scroll.js"></script>
jQueryが反応するかどうかをチェックする
scroll.jsに以下の記述をします。
$(function(){
alert('OK');
});
その後、ブラウザでhtmlファイルを開き(Macの場合・・・"⌘ + O"で開くことができます)、画面をリロードします。
この表示が出てこれば、読み込みに成功しています。
ボタンの見た目を作る
font-awesomeから上矢印アイコンのタグをコピペする
font-awesomeの使い方はこちらを参照してください。
htmlファイルのheadタグ内には、font-awesomeを読み込むための記述をしています。
<script src="https://kit.fontawesome.com/6cff6feef5.js" crossorigin="anonymous"></script>
bodyタグ内には、以下の記述をしました。(コピペしたi要素をscroll-arrowというクラス名のdivタグで囲っています)
ここまでで上矢印がブラウザに表示されました！
CSSを適応させる
ボタンの背景色・高さ・横幅、アイコンの位置・大きさ・色を指定しています。
.scroll-arrow {
background-color: #888;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #ddd;
}
こんな感じ
さらに、画面の右下にボタンを固定させ、ボタンを円形にし、マウスを当てた時のポインターを指マークに変更します。
こんな感じ
あとで最上部にボタンを押したらスクロールされることを確認するため、main要素を作り以下のCSSを適応させます。
main {
height: 1500px;
background-color: #f3ffff;
}
最上部は、こんな感じ
最下部は、こんな感じ
ボタンを押した時の処理を書く
scroll.js
$(function(){
$('.scroll-arrow').on("click", function(){
$('html').animate({scrollTop: 0});
});
});
ボタンをクリックした時に画面全体が最上部に移動するという意味です。
完成gif動画
https://gyazo.com/2dcdbc82ac8b0337a0d17ed36d9b2df1
目次に適応させる場合
「scrollTop: 0」の数値を変化させれば、好きな画面の位置に移動できるので、目次に応用することも可能です。
例えば、この画像では、「scrollTop: 0」の位置にいますが、
左の目次のjQueryをクリックすると「scrollTop: 2500」の位置へと飛びます。
これは、iQueryに付与されたidであるskill-3に対して以下のような、クリックイベントを指定しているためです。
$('#skill-3').on("click", function(){
$('html').animate({scrollTop: 2500})
});
以上です。
