jQuery 02 スクロール量を取得する | 乙街道
乙技を求めて クリエイティブな情報

【jQuery 02 スクロール量を取得する】

02 スクロール量を取得する

今回はjQueryを使ってスクロール量を取得します。
スクロール量が取得出来れば任意の位置までアンカーリンクを飛ばしたり、画像や動画をスクロール途中でフェードインさせたりすることが出来ます。
これを利用してページ上部に戻るボタンやコンバージョンボタンの実装なども可能です。

動的に作業をご覧になりたい方は↓をご覧ください。

jQuery本体はページ上部で読み込みましょう。
今回はCSSを使います。別途ファイルを作成し読み込みましょう。

 

<head>内記述

<link rel="stylesheet" href="css/jquery02.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

それではhtmlを書き込みましょう。

 

<body>内記述

<p class="scroll-amount">
  スクロール量: <span id="scroll-amount-window">0px</span>
</p>
<div class="content">
  <h1>スクロール量をjQueryで取得しよう!</h1>
</div>

 

上記p(.scroll-amount)タグスクロール量に応じて取得した値を表示させる部分です。

 

続いてCSSは下記です。.contentで高さを指定しスクロールできるようにします。

 

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.content {
  margin: 0 auto;
  padding: 40px;
  height: 2500px;
}
.scroll-amount {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  font-weight: bold;
  padding: 20px 40px;n
}

 

続いてjQueryのスクロール量取得の記述です。

 

//ウィンドウ内スクロール量
$(window).scroll(function() {
  $('#scroll-amount-window').text($(this).scrollTop() + 'px');
});

 

無事スクロール量を取得できましたでしょうか。
動的にご覧になりたい方は動画をご覧くださいませ!

 

★デモページ
https://otsukaido.jp/test-directory/jquery/jquery02.html


★動画(YouTube)
https://youtu.be/6Jqn-fri-EY

 

☆免責事項

記事投稿日をご確認の上、古い情報にはご注意ください。
本記事、またリンク先の動画は動作を保証するものではありません。
本記事、またリンク先の動画の内容により起きたトラブル等は一切保証できません。

乙街道 twitter

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7