스크롤 상단 이동 버튼에... 자바스크립트 질문 드립니다. 채택완료

</strong></p>

<p>$(function() {</p>

<p>    function updateScrollPercent() {</p>

<p>        var docHeight = $(document).height();</p>

<p>        var windowHeight = $(window).height();</p>

<p>        var scrollPosition = $(window).scrollTop();</p>

<p>        if (scrollPosition === 0) {</p>

<p>            $('#top_btn').hide();</p>

<p>            return;</p>

<p>        }</p>

<p> </p>

<p>        if (docHeight > windowHeight) {</p>

<p>            var scrollPercent = (scrollPosition / (docHeight - windowHeight)) * 100;</p>

<p>            var scrollPercentRounded = Math.round(scrollPercent);</p>

<p>            $('#top_btn').text(scrollPercentRounded + '%').show();</p>

<p>            $('#top_btn').css('background', 'rgba(48, 89, 199, ' + (scrollPercentRounded / 100) + ')');</p>

<p>        } else {</p>

<p>            $('#top_btn').hide();</p>

<p>        }</p>

<p>    }</p>

<p> </p>

<p>    $(window).on('scroll', function() {</p>

<p>        window.requestAnimationFrame(updateScrollPercent);</p>

<p>    });</p>

<p> </p>

<p>    updateScrollPercent();</p>

<p> </p>

<p>    $("#top_btn").on("click", function() {</p>

<p>        $("html, body").animate({ scrollTop: 0 }, '500');</p>

<p>        return false;</p>

<p>    });</p>

<p> </p>

<p>    $("#top_btn").hover(</p>

<p>        function() {</p>

<p>            $(this).text('Top');</p>

<p>        },</p>

<p>        function() {</p>

<p>            if ($(this).is(':visible')) {</p>

<p>                updateScrollPercent();</p>

<p>            }</p>

<p>        }</p>

<p>    );</p>

<p>});</p>

<p><strong>