WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装

3,912 0

先日、「WordPress上部ローディングプログレスバーのコード」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。

今回ご紹介するのは、横方向に表示されるプログレスバーです。ウェブページを下へスクロールするにつれて、プログレスバーが徐々に長くなります。また、スクロールバーの色をカスタマイズすることもできます。現在、このサイトでもこのコードを導入しており、実際の効果は当サイトのページで直接確認できます。以下がコードです。

HTMLコード

HTML
<div id="load"></div>

CSSコード

CSS
#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}

JSコード

JavaScript
$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});

注意:HTMLコードは body タグの直下の1行目に配置する必要があります。

コメント

(0)

まだコメントはありません

コメントを投稿

憂いを忘れる一枚

「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。

© 2026 憂いを忘れる一枚. 無断転載を禁じます.