WordPress で スクロールの位置を数字で表示 【Scroll Progress】

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約1年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  :

WordPress で スクロールの位置を数字で表示 【Scroll Progress】

スクロールの進捗状況?

ページをスクロールしていくとバーが伸びていくエフェクトみたいなのありますよね。

「スクロール プログレスバー」

なんて呼ぶらしいんですけど

私は「数字で%パーセント」表示にしたいなぁーなんて思って

色々と調べてみました。

まずは完成の画像

scroll progress percent

1番簡単チンな方法を書きますね

お使いのテーマの header.php の中の

を探してください。

そこの上に

そして head の下に

まとめると

となります。

下記サイト様のコードをそのまま使用しつつ

jQuery ページ全体のうちどこまでスクロールしたかパーセントで表示 | blog|blow→in

jQuery なので WordPress で使用する場合の方法は下記サイト様を参照。

WordPressでのダメなjQuery関数の囲み方4パターンと対策講座 | 新潟のホームページ制作会社 合同会社直送計画

テーマによって調整が必要な場合があります。

1番下までスクロールしていないのに 100% になってしまう場合は

ここの 1.165 を増減させてみて下さい。

PCでもスマホでも調度良い感じにしたのですが、本当はメディアクエリで表示を変えた方がイイよね。

コメントを残す

メールアドレスが公開されることはありません。

*