【jQuery】オリジナルスクロールバーを用意してクリックしたら移動する機能を作ったときの備忘録

ブラウザのスクロールバーを使う機会が意外と多いいのでオリジナルスクロールバーを用意して、クリックしたら移動する機能を作ってみた

ソースコード

デモのベースが前回の備忘録なので、追加分だけ載せておく

<style>
#progressBar {
  cursor: pointer;
  height: 100%;
  position:fixed;
  top:0;
  right:0;
  width:50px;
  background:#eee;
}
</style>

<div id="progressBar"></div>

<script>
jQuery(function($){
    $('#progressBar').click(function (e) {
		var documentHeight = $(document).height();//全体の高さ
		var windowHeight = $(window).height();//画面の高さ
		var windowPosition = e.offsetY;//オリジナルスクロールバー内のクリックされたy座標(画面のy座標)
		var documentPosition = windowPosition / windowHeight * documentHeight;
		$('body, html').animate({ scrollTop: documentPosition }, 500);
    });
});
</script>

windowPosition / windowHeight * documentHeightでは、オリジナルスクロールバー内のy座標を画面の高さで割って比率を導き出し、その比率とページ全体の高さを掛け合わせることでオリジナルスクロールバーのy座標に当たるページ全体のy座標を導き出すことができる

これで、オリジナルスクロールバーのクリックされたy座標を元にページをスムーズにスクロールするオリジナルスクロールバーができたと思う

メモ

今までfunction(e){…}って使われている「e」というイベントオブジェクトに対してよくわかってなかったけどイベントの発生元の要素やキーの情報なんかを取得できるみたい

何を言っているのか自分でもわからないけど、console.log(e)でイベントの中身を調べたら

clientY、offsetY、pageY、screenY
って位置情報に関する値が入っていた

$(this)を使って取得をしようと思ったら位置情報の取得が上手くいかなかったけど、クリックした位置はイベントオブジェクト「e」とかで取得して、要素の位置は$(this).offset().topとかで取得する感じなのかな？