스크롤을 내리면 스무쓰하게 나타나는 TOP버튼
링크
http://hellpa1987.ruatic.net/ (909) http://mattvarone.com/web-design/uitotop-jquery-plugin/ (962)
화면 상단에 있을때는 버튼이 나타나지 않고
마우스 스크롤로 내리면 스무쓰하게 나타나는 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을 수정하여 사용하면됩니다.
마우스 스크롤로 내리면 스무쓰하게 나타나는 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개
hithat
13년 전
멋집니다^^
후라보노보노
13년 전
감사합니다 ^^
루트오백사십일
12년 전
좋습니다^^
11년 전
하단으로 가는 방법은 어떻게 응용해야 할지 ㅠㅠ
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3309 | 3년 전 | 1805 | ||
| 3308 | 11년 전 | 2093 | ||
| 3307 |
uPAmJ903
|
6년 전 | 4752 | |
| 3306 |
바른사나이
|
6년 전 | 3274 | |
| 3305 | 6년 전 | 12312 | ||
| 3304 | 7년 전 | 3705 | ||
| 3303 | 7년 전 | 3744 | ||
| 3302 |
지리산초보
|
7년 전 | 13597 | |
| 3301 |
sozet
|
8년 전 | 4904 | |
| 3300 |
sozet
|
8년 전 | 5974 | |
| 3299 |
sozet
|
8년 전 | 10863 | |
| 3298 | 8년 전 | 4017 | ||
| 3297 |
또치하우스
|
8년 전 | 4444 | |
| 3296 | 8년 전 | 11972 | ||
| 3295 |
또치하우스
|
8년 전 | 14987 | |
| 3294 | 8년 전 | 6027 | ||
| 3293 | 8년 전 | 5592 | ||
| 3292 |
 bluells |
9년 전 | 5318 | |
| 3291 | 9년 전 | 13682 | ||
| 3290 | 9년 전 | 5055 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기