【jQuery】スクロール量とページの高さを取得して円グラフで残量を表示

色々調べていたのだが、纏まってちゃんと説明されているページが見当たらなかったので作ってみました。

このサイトでも右下の「上部へ戻る」メニューに利用しています。
追記)その後、グラデを重ねて少しデザインを変えました。

Statusbrew

きっかけは、こちらのサイト「Statusbrew」。

スクロール量に応じて円の縁が一周する仕様

SNSの予約投稿ツールStatusbrewのサイトの記事に、スクロール量を表示しているパーツがあり、これをとても気に入って自分でも作ってみました。

こういった小さな演出、所謂「マイクロインタラクション」はインターフェイスとしての効果が高いですよね。

右上の赤線で囲った部分がそれです。

一瞬、円に沿って線を一周させるのかと思ったのですが、そんな事はなく、よく考えれば、円グラフが増幅すればいいだけで、円グラフのパーツと普通の円と上を向いた矢印を重ねれば実現可能でした。

最もシンプルなサンプルはこちら

実際に動いているサンプルが下の円です。スクロールを上下に動かしてみてください。

スクロール量によって円グラフが動く

HTML

<div class="circle-graf"></div>

CSS

.circle-graf{
	width:200px;
	height:200px;
	border-radius:50%;
}

jQuery

$(function() {
	$(window).scroll(function(){
		var bodyHeight = $('body').height(); 
		var windowHeight = $(window).height();
		var windowScroll = $(window).scrollTop(); 
		var calcPercentage = (windowScroll / (bodyHeight - windowHeight)) * 100; 
		var totalPercentage = Math.round(calcPercentage);
		$(".circle-graf").css({
			'background-image' :
			'conic-gradient(#66ff99 0% '+totalPercentage+'%, #ccc '+totalPercentage+'% 100%)'});
		});
});

上の円と矢印も重ねてみる

HTML

<div class="circle-graf"><span><i class="fas fa-caret-up"></i></span></div>

CSS

.circle-graf{
	width:200px;
	height:200px;
	border-radius:50%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.circle-graf span{
	display:block;
	width:180px;
	height:180px;
	border-radius:50%;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.circle-graf span i{
	font-size:120px;
	line-height:1;
	margin-top:-15px;
}

.circle-graf span iの、line-height:1;とかmargin-top:-15px;は矢印の天地調整で入れているだけです。

jQuery

jQueryは先程と同じです。

iPhoneでズレた

PC上で問題なく走っていたのですが、iPhoneでチェックしたら若干ズレがあった!

いろいろ調べたらアドレスバー部分を含まないサイズになっているみたいです。なので「 $(window).height();」部分を「window.innerHeight;」に修正しました。

jQuery

$(function() {
	$(window).scroll(function(){
		var bodyHeight = $('body').height(); 
		var windowHeight = window.innerHeight;
		var windowScroll = $(window).scrollTop(); 
		var calcPercentage = (windowScroll / (bodyHeight - windowHeight)) * 100; 
		var totalPercentage = Math.round(calcPercentage);
		$(".circle-graf").css({
			'background-image' :
			'conic-gradient(#66ff99 0% '+totalPercentage+'%, #ccc '+totalPercentage+'% 100%)'});
		});
});

これでiPhoneでもうまくいきました。

Yuki Nakata

中田デザイン事務所 代表

WEBデザイナー / WEB講師 / 海外販売 他

お仕事のご相談はお問い合わせフォームへお願いします。
事務所概要はコチラ