スクロール進捗率をプログレスバーで表すサンプル

ページのスクロール率をプログレスバーとして配置しているサンプルです。
どれだけ読んだかなどをわかりやすくシンプルに伝えるときに使えるかと。

See the Pen スクロール進捗率をプログレスバーで表すサンプル by takapen (@takapen) on CodePen.

html

aaa
aaa
高さを出すためのたくさんのpタグ
aaa
aaa

css

* {
  margin: 0;
  padding: 0;
}
#bar-area {
  width: 100%;
  height: 10px;
  background: #ccc;
  position: fixed;
  bottom: 0;
}
#bar {
  width: 0;
  height: 10px;
  background: #ff224b;
  display: block;
}

jQuery

$(function(){

  var bodyCH = document.body.clientHeight;//ページ全体の高さ
  var innerH = window.innerHeight;//ウインドウ全体の高さ
  var allH = bodyCH - innerH ;//scrollTopの高さ調整

  $(window).scroll(function(){
    var scrollT= $(window).scrollTop();//スクロール位置
    var percent = Math.round((scrollT / allH * 100));//四捨五入して割合を出す
    //$('#bar').css('width',percent + '%');//cssを書き換える
    $('#bar').animate({
      width: percent + '%',
    }, 80 );
  });

});