jquery 제이쿼리 탑버튼 구현, 최상단으로 올라가기, 최상단 이동

 

 jquery 제이쿼리 탑버튼 구현, 최상단으로 올라가기, 최상단 이동

 

흔히 볼수 있는 탑버튼(최상단으로 이동)을 구현하는 방법을 알아보자.

 

jquery-1.11.2.min.js 을 인터넷에서 다운받아 프로젝트에 넣거나

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

을 추가한다.

 

그리고 클릭하면 최상단으로 올라갈 객체를 생성한다.

 

<a class="return-top" href="#" style="right:50%; bottom:15px; position:fixed; z-index:9999999999;">[Top으로이동]</a>

 

right를 50%로 bottom을 15px로 바닥 중간데 값을 fioxed 했다. z-index는 객체를 최상위로 올리기 위해 사용.

 

이제 스크립트를 구현한다. 

현재는 최상단일 경우 탑버튼을 숨겼지만 계속 보이고 싶으신 분은 아래 주석을 참고한다.

 

 

 

<script type="text/javascript">
$(function(){
  $(".return-top").hide(); // 탑 버튼 숨김 - 이걸 빼면 항상 보인다.
     
     $(window).scroll(function () {
         if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
             $('.return-top').fadeIn();
         } else {
             $('.return-top').fadeOut();
         }
     });
             
     $('.return-top').click(function () {
         $('body,html').animate({
             scrollTop: 0  //탑 설정 클수록 덜올라간다
         }, 1000);  // 탑 이동 스크롤 속도를 조절할 수 있다.
         return false;
     });
}); 
</script>

 

스크롤이 내려가면 [Top으로이동] 텍스트가 보이게 되고(이미지로 변경하는게...)

텍스트를 클릭하면 최상단으로 올라가게 된다.