ブログ

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
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント