document.documentElement.scrollTop : 현재 문서가 스크롤이 될때 몇 px스크롤이 됐는지를 저장하는 속성
position
absolute는 스크롤할때 따라감
fixed는 스크롤 할때 안따라감
<style>
#top{
width:50px;
height:30px;
text-align:center;
border:1px solid black;
position:fixed;
left:500px;
top:400px;
visibility:hidden;
}
</style>
$(function()
{
$(window).click(function()
{
//alert($(window).scrollTop());
});
$(window).scroll(function()
{
// scrollTop이 400px보다 크다면 id="top"인 요소를 보이게 한다
var st=$(window).scrollTop();
if(st>=400)
{
$("#top").css("visibility","visible");
}
else
{
$("#top").css("visibility","hidden");
}
// id="menu"를 scrollTop이 530이상이면 position:fixed로 변경 그보다 낮을땐 다시 relative로 변경
if(st>=530)
{
$("#menu").css("position","fixed");
$("#menu").css("top","0px"); // 젤 위로 출력
}
else
{
$("#menu").css("position","relative");
}
});
// top이 클릭되면 제일 위로 이동
$("#btn").click(function()
{
$(window).scrollTop("0px"); // jquery에선 단위 생략 가능
});
});
</script>
</head>
<body>
<div id="top">
<span id="btn"> top </span>
</div>
쭈루룩 스크롤 ~
<div id="menu" align="center"> <a>메뉴</a> <a>임돠~</a> </div>
밑에 쭈루룩 스크롤 ~연속적인 동작으로 아래로 요소를 계속 이동시키기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function()
{
$("#btn").click(function()
{ // 이동요소 // 기준요소
$(".aa").eq(0).insertAfter($(".aa").eq(5));
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="이동">
<hr>
<ul>
<li class="aa"> 해운댕 해수욕짱 </li>
<li class="aa"> 송도야 해수욕짱 </li>
<li class="aa"> 속초록색 해수욕짱 </li>
<li class="aa"> 꽃지름 해수욕짱 </li>
<li class="aa"> 연포동 해수욕짱 </li>
<li class="aa"> 만리장성 해수욕짱 </li>
</ul>
</body>
국비 코딩