ブログ

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

> サンプル

HTML

[html]
<div class="percent_block">
<div class="percent_text"></div>
<div class="percent_bar"></div>
</div>
[/html]

CSS

[html]
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;
}
[/html]

Javascript

[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+"%"); //パーセントをバーで表示

});
});
[/javascript]

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