[그누보드] 스크롤을 내리면 스무쓰하게 나타나는 TOP버튼
-
웹스터디 /
2012.11.06 23:54 /
hit 5,983 추천
0
- jquery.easing.1.3.js (7.9K) (2) DATE : 2012-11-06 23:54:38
- jquery.ui.totop.js (1.8K) (2) DATE : 2012-11-06 23:54:39
head.sub.php 추가
<script type="text/javascript" src="<?=$layout_skin_path?>/js/jquery.easing.1.3.js"></script><script type="text/javascript" src="<?php echo $layout_skin_path?>/js/jquery.ui.totop.js"></script><script type="text/javascript">$(document).ready(function() {/*var defaults = {containerID: 'toTop', // fading element idcontainerHoverID: 'toTopHover', // fading element hover idscrollSpeed: 1200,easingType: 'linear'};*/$().UItoTop({ easingType: 'easeOutQuart' });});</script>
style.css 추가
#toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:100%;background:url(http://hacki.cdn2.cafe24.com/skin/layout/official/img/ui.totop.png) no-repeat left top;z-index:99999;}#toTopHover {background:url(http://hacki.cdn2.cafe24.com/skin/layout/official/img/ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#toTop:active, #toTop:focus {outline:none;}
tail.php 추가
<li class="fRight"><a href="#" id="toTop">TOP</a></li>
본문 아래 왼쪽에 큰 점이 하나 보이고...제일 아랫쪽 카피라이트 아래 중앙에 'To Top'이란 글자가 보이네요.
누르면 위로 이동되기는 합니다만...
<div class="menu">
<a href="#">회사소개</a>
<span class="d">|</span> <a href="#">이용약관</a>
<span class="d">|</span> <a href="#">개인정보취급방침</a>
<span class="d">|</span> <a href="#">책임의한계와 법적고지</a>
<span class="d">|</span> <a href="#">이메일무단수집거부</a>
<span class="d">|</span> <a href="#">이용안내</a>
다음에 비슷하게 넣어주시면 됩니다.
<span><a href="#" id="toTop">TOP</a></span>
사실 위치는 tail이 아니더라도 괜찮습니다.
css에 스타일 추가하면서 background:url(이미지 주소) 로 변경하시고 js파일 두개는 /js/폴더에 올리면 됩니다.
위 예제는 제 사이트에 맞춰서 글을 남긴거라 약간의 수정이 필요할수 있습니다. ^^;