【Vanilla JS】ページトップボタンにスクロール量に応じて変化するプログレスバーを表示

概要

用途・要件

• スクロール量に応じて、ページトップボタンにプログレスバーを表示させる。
• ページトップボタン要素内にsvg、path要素を配置。
• safariでオーバースクロール時にプログレスバーの線が切れる、逆方向に戻る現象に対処。
• jQueryを使用せず、JavaScriptのみで実装。

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11

注意事項

• DEMOプレビュー上で正常に動作しないため、DEMOは表示しておりません。コードをローカル環境に移設してご確認ください。
• IE11はpath要素に設定するstroke-dashoffsetに対してtransitionが効かない。
• ページトップのスムーススクロール処理は記載されておりません。

実装