[JQuery] 화면 맨위로 이동하는 기능

 

 

 

 

 

JQuery를 이용하여 화면 맨위로 올라가능 기능

 

 

- 스크롤의 위치에 따라서 맨위로 올라가는 버튼을 나타내거나 사라지도록 한다.

 

- 맨위로 올라가는 버튼을 클릭하면 자연스럽게 화면 최상단으로 올라간다.

 

 

a 태그 생성

TOP 

(버튼도 상관없어요)

 

 

style css 작성

 

#3 : 화면에 고정

 

#4 ~ #5 : 버튼의 위치 설정

 

#6 : 화면에서 숨김

 

#7 : 다른 태그들보다 위로 오도록 설정(z-index가 설정된 다른 태그가 있다면 그 태그보다 커야함)

 

 

script 작성

     $(function() {         $(window).scroll(function() {             if ($(this).scrollTop() > 500) {                 $('#MOVE_TOP_BTN').fadeIn();             } else {                 $('#MOVE_TOP_BTN').fadeOut();             }         });                  $("#MOVE_TOP_BTN").click(function() {             $('html, body').animate({                 scrollTop : 0             }, 400);             return false;         });     }); 

 

#3 : scroll 함수 이용

 

#4 ~ #8 : 스크롤 위치에 따라 화면에서 맨위로 올라가는 버튼이 나타나고, 사라지도록 설정

 

#11 : 버튼 클릭 이벤트

 

#12 : animation을 걸어서 화면 맨위로 이동하도록 설정

 

 

 

 

출처: http://cofs.tistory.com/191 [CofS]