株式会社blow-in

ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQuery ページ全体のうちどこまでスクロールしたかパーセントで表示

ブログを書いていると、知らぬ間に長いページになってしまう事があります。
そんな時は、今表示している箇所は、ページ全体の何パーセントですよ。と教えてあげるとより親切かもしれません。

HTML

<div class="percent_block">
	<div class="percent_text"></div>
	<div class="percent_bar"></div>
</div>

CSS

body{
	width:100%;
	height: 3000px;
	margin:0;
	padding:0;
}
.percent_block{
	position: fixed;
	width: 90%;
	padding: 20px 5%;
	text-align:center;
	background-color: #f5f5f5;
}
.percent_text{
	font-size:20px;
	margin-bottom: 10px;
}
.percent_text span{
	font-size:30px;
	font-family: 'Homenaje', sans-serif;
}
.percent_bar{
	width:0%;
	height: 3px;
	text-align:center;
	background-color: #000;
}

Javascript

$(document).ready(function(){
	$(window).scroll(function(){

		var CoHeight = $('body').height(); //ページ全体の高さ代入
		var Scrolly = $(window).scrollTop(); //スクロール位置代入

		var percent1 = CoHeight / 100; //1%を計算
		var percentAll = (Scrolly*1.6) / percent1; //スクロール位置を1％で割る＆誤差補正

		var percentFin = Math.round(percentAll); //小数点を四捨五入
		if( percentFin > 100 ) percentFin = 100; //100%以上加算されないように制御

		$(".percent_text").html("スクロール位置：<span> "+percentFin+" </span>%"); //パーセントを数字で表示
		$(".percent_bar").css("width",percentFin+"%"); //パーセントをバーで表示

	});
});

※jqueryは読み込んでおいてくださいね。