初心者「が」教える jQuery 【scrollTop 解説編】

jQuery

0

今回使う言語(3つ)

  • HTML
  • CSS
  • jQuery

こんにちは、みかん星人です。

皆様、お気づきでしょうか、左上のアレに…
今回はアレを使ってjQueryのコードの1つであるscrollTopの説明と使い方を紹介していこうと思います。

  ちょっと待てよ!!
  当たり前のように話を進めるな!!!!  
  scrollTopってなんだよ!!!  

ということで、

まず scrollTop とはなんなのかを簡単に画像で説明します。

上からどれだけスクロールしたか
の数です。

左上のアレはそのを見えるようにしたもの
みたいな

今は多分1600ぐらいになってると思います。

  で、数値が分かったところで何ができんの?  

と、言うとですね

別のコードと組み合わせるとですが色々できます!

例えば、

scrollTopの値が2000以上になったら「

みたいな

他にもscrollTopの値が2200以上になったら画像を大きくしたり

2500で消したり。(もしかしたら画像ちょっとバグってるかもです)

ざっくりいうとこんなことができたりします。
応用を利かせれば無限の可能性を秘めているのでまだまだできることはありまくります。


scrollTopの説明はこれくらいにしておいて、次は左上のアレを作ってみましょう。

まず最初にHTML、CSS、jQueryの3つのファイルを作りメモ帳などのテキストエディタで表示させます。
HTML、CSS、jQueryの始め方は別の記事に書いてあるのでそちらを参照していただけるとスムーズにできると思います。
HTML始め方】【CSS始め方】【jQuery始め方
※別タブで開きます

今回使うファイル名は
「scrolltop.~~」で統一しました。

HTMLの準備はこんな感じです。コピペも用意しておきました↓

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>

 <meta charset="utf-8">
 <title>scrollTop</title>
 <link rel="stylesheet" href="#.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
 </script>

</head>

<body>
	

<script src="#.js"></script>
</body>
</html>

そしてもうひと手間。

<p></p>のタグを追加し、中には「0」と書いておきます。
そしてclassも追加し、「scrollTop」と入れておきます。

「0」な理由はwebページを開いた時のscrollTopの初期値が0だからです。

まぁ後々分かります。(説明放棄)

	<p class="scrollTop">0</p>

次にjQueryの方でスクロールの値を読み込むコードを書きます。

jQueryのファイルにてとりあえず書いとけ欄の中にとりあえずこれをコピペしてください。意味の説明はコピペの下でします。

$(function(){
	$(window).scroll(function(){
		$(this).scrollTop();
	});
});

ここのコードの意味は
window(ページ)をスクロールした時に起こしたい処理」を中に書く外枠のようなものです。

これがないと何も反応しなくなるので注意です。

そしてこれが
値を読み込むためのコード」になります。

そしてもうひと手間。

青くなっているところを付けたしました
.scrollTopのclassのHTMLを変えるコードになります。これを書くことで読み込んだscrollTopの値HIMLに表示させることができます。
コピペです ↓

		$('.scrollTop').text($(this).scrollTop());

  ヨシッ!じゃあwebで見てみるか!  

ん?

  • スクロールがまずできない
  • 文字が小さい

と、いうことでCSSを使い、動くようにしつつ見やすくしていきましょう。


では一気にCSSを書いていきます。

サイト全体の
縦の長さを凄くする

scrollTopのclassを持っているものを
スクロールしても着いてくるようにする
文字のデカくする

body{
	height: 5000px;
}

.scrollTop {
	position: fixed;
	font-size: 50px;
}

webを更新して確認してみましょう。

しっかり反映されていてスクロールしても着いてくるようになりました。


では、今回はここで終わろうと思います。

次回は今回書いたscrollTopの応用を利かせたものを書こうと思います。
最初らへんにあった「出てくる文字」や「画像が大きくなったり、消えたり」など、

次回も見ていただけるとありがたいです。よろしくお願いします!

コメント

  1. samicho…Great

トップへ戻る
タイトルとURLをコピーしました