TOP 버튼

작업을 하게되면  top 버튼 구현해 달라고 하는 경우가 많이 있습니다. 

모바일 경우는 거의 필수이지 않나 싶은데요?

여러방법이 있을텐데요  내용 참고만 해주시면 되겠습니다.

 

HTML

<div class="tbox">
  <a href="#" class="top">Top</a>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

CSS

div.tbox {
    margin: auto;
    width: 500px;
    height: 2000px;
    border: 1px solid #bcbcbc;
}
a.top { /*스크롤해도 위치가 변하지 않도록 만들고, 적당히 위치를 잡은 후 보이지 않게 합니다.*/
    position: fixed;
    left: 50%;
    bottom: 50px;
    display: none;
}

 

JS

$( document ).ready( function() {  
    //스크롤하여 밑으로 내려갔을 때 링크가 보이게
    $( window ).scroll( function() {
      if ( $( this ).scrollTop() > 200 ) {
        $( '.top' ).fadeIn();
      } else {
        $( '.top' ).fadeOut();
      }
    });

    //클릭했을 때 스르륵 올라가도록
    $( '.top' ).click( function() {
      $( 'html, body' ).animate( { scrollTop : 0 }, 400 );
      return false;
    });
});

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/WNYEwjP