初心者「が」教える 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. online より:

    Howdy! This is kind of off topic but I need some guidance from an established blog. Larisa Wallie Plato

  2. indir より:

    There’s certainly a great deal to learn about this
    topic. I love all the points you made.

  3. It’s very effortless to find out any topic on web
    as compared to textbooks, as I found this post at this
    web site.

  4. Excellent write-up. I definitely appreciate this website.
    Continue the good work!

  5. Omer より:

    Hi there, after reading this remarkable paragraph i am too happy to
    share my experience here with colleagues.

  6. Lego Worlds より:

    I’m curious to find out what blog platform you’re working with?
    I’m experiencing some small security problems with my
    latest website and I’d like to find something more
    safeguarded. Do you have any recommendations?

  7. I’m not sure why but this website is loading very
    slow for me. Is anyone else having this problem or is it
    a issue on my end? I’ll check back later on and see if the
    problem still exists.

  8. Great post. I was checking continuously this blog and I am impressed!
    Extremely helpful info particularly the last part 🙂 I care for such information a lot.
    I was looking for this particular information for a very long
    time. Thank you and good luck.

  9. lampung より:

    If some one wants expert view on the topic of blogging then i advise him/her to visit this website, Keep up the good work.

  10. It’s going to be finish of mine day, however before ending I am
    reading this wonderful piece of writing to increase my know-how.

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