初心者「が」教える 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. What a material of un-ambiguity and preserveness of valuable know-how about
    unpredicted feelings.

  2. Wonderful post but I was wanting to know if you could write a
    litte more on this subject? I’d be very thankful if you could
    elaborate a little bit further. Many thanks!

  3. Nice blog right here! Additionally your site a lot up fast!
    What host are you the use of? Can I get your associate hyperlink in your host?
    I want my site loaded up as quickly as yours lol

  4. I absolutely love your blog and find most of your post’s to be exactly what I’m looking
    for. Do you offer guest writers to write content for you? I wouldn’t mind publishing a post or
    elaborating on a few of the subjects you write about here. Again, awesome web site!

  5. dugi wow より:

    Write more, thats all I have to say. Literally, it seems as
    though you relied on the video to make your point. You obviously
    know what youre talking about, why throw away your intelligence on just
    posting videos to your weblog when you could be giving
    us something enlightening to read?

  6. These lawsuits reference earlier judgments within buy naltrexone
    the United States, which held that Purdue was responsible for wrongful advertising practices and misbranding.

  7. India Tours より:

    I used to be able to find good advice from your blog posts.

  8. selling house より:

    Thanks a lot for sharing this with all people you actually understand what you are speaking approximately!
    Bookmarked. Kindly also visit my site =). We can have a link trade agreement between us

  9. raju tirkey より:

    Hello, I desire to subscribe for this weblog to take most recent updates, thus where can i do
    it please help.

  10. jasa seo より:

    Hi! I could have sworn I’ve been to this site before but
    after browsing through some of the post I realized it’s new to me.
    Anyways, I’m definitely delighted I found it and I’ll be bookmarking and checking back frequently!

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