스크롤을 내리면 스무쓰하게 나타나는 TOP버튼
링크
http://hellpa1987.ruatic.net/ (941) http://mattvarone.com/web-design/uitotop-jquery-plugin/ (987)
화면 상단에 있을때는 버튼이 나타나지 않고
마우스 스크롤로 내리면 스무쓰하게 나타나는 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개