WordPressで上部にパーセンテージ表示のスクロール読み込みプログレスバーを実装
3,912 0
先日、「WordPress上部ローディングプログレスバーのコード」という記事を書きました。ウェブサイトの読み込み時間を表示するためのもので、今回の機能と似ています。
今回ご紹介するのは、横方向に表示されるプログレスバーです。ウェブページを下へスクロールするにつれて、プログレスバーが徐々に長くなります。また、スクロールバーの色をカスタマイズすることもできます。現在、このサイトでもこのコードを導入しており、実際の効果は当サイトのページで直接確認できます。以下がコードです。
HTMLコード
HTML HTML
<div id="load"></div>
CSSコード
CSS CSS
#load {
background-color: #ff6651;
height: 3px;
width: 0px;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
}
JSコード
JavaScript 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)まだコメントはありません