jQuery:スクロール値の取得・表示する方法

Tips

jQuery:スクロール値の取得・表示する方法

備忘録。jQueryを使用して現在のスクロール値を取得・表示させる方法です。
パララックスサイトなどでスクロール値によって要素を動かしたり表示・非表示を切り替えたりすることがありますが、そういったものを実装する際にどの位置で処理を行うかの目安になり非常に便利です。

HTML

<head>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(window).scroll(function() {
        $('#sv').text('スクロール値:' + $(this).scrollTop());
      });
    });
  </script>
</head>

<body>
  <p id="sv" style="position: fixed; top: 20px; right: 20px;">スクロール値:0</p>
</body>

jQueryが必要なので予め読み込ませておき、あとはそれぞれ記述してブラウザで確認すると、ページ右上に現在のスクロール値が表示されるようになります。
他の場所に表示したいという場合はソース赤字部分のtop: 20px;right: 20px;の箇所を任意で変更してください。
上記ソースでは必要なくなったらすぐに削除できるようにスタイルなどをHTML内に全て記述していますが、外部ファイルに記述してもちろん問題ないです。

Close the search window,
please press close button or esc key.