初心者「が」教える 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. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for
    you? Plz answer back as I’m looking to design my own blog and would like to know where u got this from.

    kudos

  2. Hi there! I just want to give you a huge thumbs up for
    the excellent info you’ve got here on this post.
    I’ll be returning to your website for more soon.

  3. judi bola より:

    What’s Happening i am new to this, I stumbled upon this I’ve discovered It positively helpful and it has aided me out loads.
    I am hoping to give a contribution & aid other customers like its helped me.
    Good job.

  4. I believe this is one of the so much important info
    for me. And i am glad reading your article. However wanna statement on some basic
    issues, The website taste is perfect, the articles is truly great : D.
    Just right job, cheers

  5. Hi there, just wanted to mention, I enjoyed this post.
    It was helpful. Keep on posting!

  6. This post offers clear idea in support of the new users of blogging, that in fact how to do running a
    blog.

  7. It’s an amazing piece of writing for all the internet people; they will take advantage from it I am sure.

  8. dwarf hamster より:

    Outstanding story there. What happened after?
    Thanks!

  9. sofaloka より:

    Appreciate this post. Will try it out.

  10. An interesting discussion is worth comment. There’s no
    doubt that that you need to write more about this
    issue, it might not be a taboo matter but generally people don’t discuss these topics.
    To the next! Kind regards!!

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