본문 바로가기
보드게임 긱 추천 게임
Wizard Thumbnail
BoardGameGeek 사이트에서 인기순위 상위 100개 중 랜덤 3개를 보여줍니다.
BGG
귀펀치토끼는 부서지지 않는다.
주소(D)
영웅은 공부 따원 안 한다네/HTML CSS

프로그레스 서클 + 맨 위로가기 버튼

<div class="wrap-move-top">
	<input class="dial"/>
</div>
.wrap-move-top {
		display: flex;
    align-items: center;
    justify-content: center;
		float: left;
    right: 19px;
    bottom: 17px;
    position: fixed;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(5px);
    overflow: hidden;
    transition: 0.3s linear;
    z-index: 120;
}

.wrap-move-top::after {
    border-radius: 50%;
    position: absolute;
    width: 35px;
    height: 35px;
    margin-left: -7px;
    margin-top: -17px;
    top: 50%;
    left: 50%;
		font-family: "Font Awesome 5 Free";
    font-weight: bold;
		color: #ffd866;
    content: '\f106';
    font-size: 24px;
    cursor: pointer;
    z-index: 1;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>

<script>
$(document).ready(function() {
    var offset = 100,
            scroll_top_duration = 700,
            $go_top = $('.wrap-move-top'),
            $thedial = $('.dial'),
            $progress_circle = $('.wrap-move-top');

    // Initialize the progress dial
    $thedial.knob( {
        'min' : 0,
        'max' : 100,
        'width' : 35,
        'height' : 35,
        'fgColor' : 'rgba(255, 216, 102, 1)',
        'thickness' : .2,
        'displayInput' : false,
        'displayPreview' : false,
        'readOnly' : true
    });

    $(window).scroll(function() {
        // Hide or show the progress bar
        ($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
        // Get the window position and set it to a variale
        var s = $(window).scrollTop(),
                d = $(document).height(),
                c = $(window).height();
        scrollPercent = (s / (d-c)) * 100;

        // Bind the window position to the progress dial
        $('.dial').val(scrollPercent).change();
    });

    //smooth scroll to top
    $go_top.on('click', function(e) {
        e.preventDefault();
        $('body,html').animate( {
            scrollTop: 0 ,
        }, scroll_top_duration);
    });
});
</script>
완료
내 컴퓨터