스크롤을 내리면 스무쓰하게 나타나는 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와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2889 | 13년 전 | 9772 | ||
| 2888 | 13년 전 | 4934 | ||
| 2887 |
Francis
|
13년 전 | 2934 | |
| 2886 |
 제네시스옥션 |
13년 전 | 3512 | |
| 2885 |
현이빈이파파
|
13년 전 | 2593 | |
| 2884 | 13년 전 | 3882 | ||
| 2883 |
시티오브엔젤
|
13년 전 | 3696 | |
| 2882 | 13년 전 | 8171 | ||
| 2881 | 13년 전 | 3365 | ||
| 2880 | 13년 전 | 8768 | ||
| 2879 | 13년 전 | 4987 | ||
| 2878 | 13년 전 | 7153 | ||
| 2877 | 13년 전 | 5950 | ||
| 2876 |
 넓은마인드 |
13년 전 | 5002 | |
| 2875 | 13년 전 | 3724 | ||
| 2874 | 13년 전 | 9430 | ||
| 2873 |
 H홈P페이지 |
13년 전 | 3946 | |
| 2872 | 13년 전 | 7619 | ||
| 2871 | 13년 전 | 4880 | ||
| 2870 |
 KIMys |
13년 전 | 5993 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기