여기 저기서 이런 저런 방법들을 모아 짜집기해서 만들어 본 탑 버튼 소스입니다. css편집이나 HTML에 태그 추가등의 작업 없이 <head>…</head> 사이나 </body> 위에 스크립트 소스만 추가하면 되는 방법입니다.
많은 스킨에 적용해보진 않았지만 대부분의 스킨에서 잘 작동할것 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script src=“http://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js”></script> <script type=“text/javascript”> $(document).ready(function() { $(“body”).append(“<a class=’return_top’ href=’#’>▲ TOP</a>”); var top = $(“.return_top”); $(window).scroll(function () { if ($(this).scrollTop() > 120) { top.slideDown(); }else { top.slideUp(); } }); top.click(function () { $(‘body,html’).animate({ scrollTop:0 },900);return false;}) .css({ “right”:“15px”, “bottom”:“15px”, “padding”:“7px”, “color”:“#fff”, “background”:“#6799ff”, “border-radius”:“5px”, “position”:“fixed”, “z-index”:“9999” }) .hide() .hover(function() { $(this).css({“background”:“#f15f5f”}) }, function() { $(this).css({“background”:“#6799ff”}) } ); }); </script> | cs |
이미 헤더부분에 jquery가 이미 존재한다면 1번 라인 <script src=”http://t1.daumcdn.net/tistory_admin/lib/jquery-2.1.4.min.js”></script>은 불필요 합니다. 특별히 추가할 부분 없이 HTML 편집에서 </body> 위에 추가해주시면 바로 작동 합니다.
대충 설명을 드리자면
if ($(this).scrollTop() > 120) { : 120 만큼 스크롤이 내려오면 작동 합니다.
$(‘body,html’).animate({ scrollTop:0 },900);return false;}) : 900은 클릭했을때 최상단으로 스르륵 스크롤 올라가는 속도입니다.
.css({“right”:“15px” … “z-index”:“9999” }) : 버튼의 속성으로 배경색등 적장히 조절하시면 됩니다.
.hover(function() { $(this).css({“background”:“#f15f5f”}) }, : #f15f5f는 마우스가 버튼위 올라왔을때 배경색상입니다.
function() { $(this).css({“background”:“#6799ff”}) } : 마우스가 벗어 났을때 색상입니다. 위 .css 부분의 배경색상과 같이 맞춘색상입니다.
일정량 스크롤을 내리면 브라우저 오른쪽 하단에서 슬라이드업 됩니다.