ブログ

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は読み込んでおいてくださいね。

投稿日
2013年7月12日
カテゴリー
JavaScript

コメントを残す

デザイン&メディア事業blow→in
[商工会議所オフィス]
大阪府泉佐野市市場西3-2-34-306
TEL.072-493-3358(代)
[日根野オフィス]
大阪府泉佐野市日根野3963-3-403
TEL.072-468-8786
アパレル&プリント事業DIGMO
HANDPURI
大阪府泉佐野市日根野4036-1
TEL.0120-610-322
ブランディング事業かつらぎフルーツ
和歌山県かつらぎ町東渋田325-4
TEL.090-3612-3401
飲食店事業cafeblow
大阪府泉佐野市日根野3963-3
TEL.090-5127-9187