<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var Oposition = $(window).height()/2 - $("#slidemenu").height()/2;
$("#slidemenu").css('top', Oposition);
$('#tobottom').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
});
$(window).scroll(function() {
var position = Oposition + $(window).scrollTop() ; //레이어의 세로 위치
$("#slidemenu").stop().animate({"top":position+"px"}, 1000);
if(position < $(document).height()/2) $("#slidemenu").html('<span id="tobottom">아래로</span>');
else $("#slidemenu").html('<span id="totop">위로</span>');
$('#totop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
$('#tobottom').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
});
});
});
//]]>
</script>
<style type="text/css">
#wrap{text-align:left;margin:0 auto;height:1000px;}
#slidemenu{position:absolute;cursor:pointer; right:10px;}
</style>
</head>
<body>
<div id="wrap">
<div id="slidemenu"><span id="tobottom">아래로</span></div>
</div>
'유용한정보' 카테고리의 다른 글
| [HTML5] Video & Audio (0) | 2015.02.21 |
|---|---|
| JavaScript 최적화 (CompressorRater) (0) | 2015.02.20 |
| jquery 기본문법 (0) | 2015.02.16 |
| CSS border-image 속성 (0) | 2015.02.16 |
| <UL><LI>를 이용한 가로정렬 메뉴 만들기 (0) | 2014.09.01 |
| 홈페이지에 무료음악 플레이어 설치하기 (0) | 2014.06.06 |
| 스마트폰 무료음악 감상 어플리케이션 (0) | 2014.06.06 |
| 랜덤배너소스 + 랜덤 아이프레임 소스 (0) | 2014.05.24 |
댓글