【jQuery 02 スクロール量を取得する】
最終更新日：2021年3月28日
今回は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
☆免責事項
記事投稿日をご確認の上、古い情報にはご注意ください。
本記事、またリンク先の動画は動作を保証するものではありません。
本記事、またリンク先の動画の内容により起きたトラブル等は一切保証できません。
この記事を読んだ人はこんな記事も読んでいます
2021年11月18日
2021年11月18日
2021年9月12日
2021年6月12日
2021年5月21日
2021年4月12日
2021年3月28日
2021年3月23日
2020年5月16日
2020年1月12日
2020年1月8日
2018年9月11日
