【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でもうまくいきました。