どのくらいページを読み進んだかがわかるトップへ戻るボタン

どのくらいページを読み進んだかがわかるトップへ戻るボタン

CODEPENを漁っていたら面白いものを見つけました。動作的にはページのトップへスクロールしながら戻るボタンなのですが、そのページをどのくらい読み進めたかがわかるようになっています。サイトやページにちょっとしたアクセントを付けたいときに良いのではないでしょうか。あくまでトップへ戻るボタンなので、デザインの邪魔にもなりにくいと思います。

サンプル

上の説明を読んだだけではあまり意味がよくわからないと思います。百聞は一見に如かずということでサンプルを見てみてください。大きい画面で見た方がわかりやすいと思います。

See the Pen
Back to top with progress indicator
by Ivan Grozdic (@ig_design)
on CodePen.


各ソースの説明

基本的にはCODEPENのソースをコピペしてもらって好きなようにいじってもらえればと思いますが、簡単な説明を。

HTML

HTMLは色々書かれていますが、ボタン部分のソースは下記の部分になります。

<div class="progress-wrap">
	<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
		<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
	</svg>
</div>

CSS

CSSでキモになるのは下記の部分ではないでしょうか。@keyframes border-transformでボタンの線をアニメーションさせています。

@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

javascript

javascriptは基本まるっとコピペしてもらえれば良いのですが、要jQueryです。ご注意を。