선

스크롤을 내리면 스무쓰하게 나타나는 TOP버튼

· 2012-10-31 (수) 16:48:01 · 9096 · 4
화면 상단에 있을때는 버튼이 나타나지 않고

마우스 스크롤로 내리면 스무쓰하게 나타나는 TOP버튼 jquery plugin방식

링크1 : 돼지코구뇽님 홈페이지입니다.( 몇몇 그누보드 사용자들은 다들 가지고 계시더라구요..)
링크2 : 원본소스 홈페이지입니다. (UItoTop jQuery Plugin - Matt Varone)

적용방법은
<head></head>안에 사용합니다.

[code]
<head>
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
<!-- jquery -->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>
</head>
[/code]
Top버튼으로 사용할 이미지는 img와 ui.totop.css을 수정하여 사용하면됩니다.
|

댓글 4개

멋집니다^^
2012-11-07 (수) 13:28:33
감사합니다 ^^
2013-10-12 (토) 22:38:51
좋습니다^^
2014-09-12 (금) 11:10:34
하단으로 가는 방법은 어떻게 응용해야 할지 ㅠㅠ
댓글을 작성하시려면 로그인이 필요합니다.

그누4 팁자료실

3,309건

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요. 나누면 즐거움이 커집니다.

+
제목 글쓴이 날짜 조회
12-11-05 조회 1만
12-11-04 조회 5,299
12-11-02 조회 3,252
12-11-02 조회 3,986
12-11-02 조회 2,912
12-11-01 조회 4,208
12-11-01 조회 3,988
12-10-31 조회 8,614
12-10-31 조회 3,704
12-10-31 조회 9,097
12-10-30 조회 5,367
12-10-30 조회 7,491
12-10-30 조회 6,281
12-10-29 조회 5,280
12-10-29 조회 4,029
12-10-26 조회 1.1만
12-10-24 조회 4,255
12-10-23 조회 7,955
12-10-20 조회 5,233
12-10-19 조회 6,287