20'C 흐림
서울 강남구
우측에 위로 가기 버튼과 동일 하지만 퍼센트로 표시를 해주고
버튼을 누르게 되면 상단으로 이동되는 스크립트 입니다.
<button id="scrollToTopBtn">0%</button>
<style type="text/css">
#scrollToTopBtn { position:fixed; bottom:20px; right:20px; padding:5px; font-size:11px; background-color:#E30613; color:white; border:none; border-radius:5px; cursor:pointer; opacity:0; visibility:hidden; transition:opacity 0.5s, visibility 0.5s; }
#scrollToTopBtn:hover { background-color:#FF000E; }
#scrollToTopBtn.show { opacity:1; visibility:visible; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var $window = $(window);
var $scrollToTopBtn = $('#scrollToTopBtn');
var $document = $(document);
$window.scroll(function() {
var scrollPercent = Math.round($window.scrollTop() / ($document.height() - $window.height()) * 100);
$scrollToTopBtn.text(scrollPercent + '%');
if($window.scrollTop() > 200){
$scrollToTopBtn.addClass('show');
}else{
$scrollToTopBtn.removeClass('show');
}
});
$scrollToTopBtn.click(function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
});
</script>
===============================================================
<style type="text/css">
.progress-bar { position:fixed; top:0; left:0; width:0%; height:5px; background-color:blue; z-index:9999; }
</style>
<div class="progress-bar"></div>
<script type="text/javascript">
$(window).on('scroll', () => {
let scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;
$('.progress-bar').width(scrollPercent + '%');
});
</script>
이 기능은 사용자가 페이지를 얼마나 스크롤 했는지 시각적으로 보여주는 간단하지만 효과적인 방법입니다.
head.sub.php에 업로드 하셔서 사용 하시면 됩니다.