Programing/jQuery

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

리커니 2016. 2. 24.
반응형

 

 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는 객체를 최상위로 올리기 위해 사용.

 

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

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

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
cs

 

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

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

 

 

반응형

댓글

💲 추천 글