김서훈

간단한 스크롤 진행률 표시기 구현하기 2

· 2024-01-10 (수) 17:12:43 · 1692 · 2

<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>

우측에 위로 가기 버튼과 동일 하지만 퍼센트로 표시를 해주고

버튼을 누르게 되면 상단으로 이동되는 스크립트 입니다.

|

댓글 2개

감사합니다.

감사합니다.

댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
PHP 24-06-30 조회 1,243
jQuery 24-06-19 조회 1,272
PHP 24-05-27 조회 1,714
Mobile 24-05-21 조회 1,392
기타 24-05-11 조회 1,223
23-10-30 조회 2,141
기타 23-10-24 조회 2,660
23-12-19 조회 1,672
24-01-10 조회 1,693
24-01-10 조회 1,675
24-01-15 조회 1,446
24-02-09 조회 5,086
24-02-16 조회 2,508
24-02-16 조회 2,611
24-02-18 조회 3,504
24-02-22 조회 3,272
24-02-25 조회 4,365
24-03-09 조회 2,462
JavaScript 24-02-26 조회 1,445
OS 24-02-25 조회 1,488
PHP 24-02-23 조회 1,653
PHP 24-02-18 조회 1,537
PHP 24-02-17 조회 1,457
PHP 24-02-16 조회 1,581
PHP 24-02-05 조회 1,597
JavaScript 24-01-28 조회 1,442
PHP 24-01-28 조회 1,382
PHP 24-01-27 조회 1,351
PHP 24-01-27 조회 1,481
PHP 24-01-27 조회 1,445