Top button

                        
<div id="wrap">
  <div class="btnArea">
      <button type="button" class="arrowTop">
          <span class="hidden">상단으로 가기</span>
      </button>
  </div>
</div>

                        
#wrap{
    .btnArea{position: fixed; bottom: 20px; right: 20px;
        .arrowTop{width: 45px; height: 45px; border-radius: 50%; background-image: url("../../images/ico/ico-top-button-w.png"); 
        background-repeat: no-repeat; background-position: center; background-color: $_222Bg;}
    }
}

                        
#wrap .btnArea {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
    
#wrap .btnArea .arrowTop {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-image: url("../../images/ico/ico-top-button-w.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #222;
}

                        
$(function(){
    $('.arrowTop').on({
        "click": function () {
            $('#frameBody').animate({ scrollTop: 0 }, 600);
        }
    });
});

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.

Start line