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

[ ID : 7685 ]
シルバー
【Vanilla JS】ページトップボタンにスクロール量に応じて変化するプログレスバーを表示
実装目安
3分

概要

ページをどれだけスクロールしたかを可視化するプログレスバーをページトップボタンに表示する方法を紹介。

用途・要件

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

検証ブラウザ

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

注意事項

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

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録