테스트 사이트 - 개발 중인 베타 버전입니다

간단한 스크롤 진행률 표시기 구현하기 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개

게시판 목록

개발자팁

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