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]