프로그램/HTML
jquery 기반 스크롤을 가장 가까운 box 위치로!
킹콩맨
2014. 12. 1. 17:57
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src='jQuery.js'></script>
</head>
<body>
<script>
$(function(){
$('.link-btn').click(function(){
$('.link-area').removeAttr('id');
var scrollTop = $('body').scrollTop();
var obj = $('.link-area');
if( $(this).index() == 0 ){
for(i=obj.length-1; i>=0; i--){
var objScrollTop = obj.eq( i ).offset().top;
if( objScrollTop < scrollTop ){
$('body').scrollTop(obj.eq(i).offset().top);
break;
}
$('body').scrollTop(obj.filter(':first').offset().top);
}
}else{
for(i=0; i<obj.length; i++){
var objScrollTop = obj.eq( i ).offset().top;
if( objScrollTop > scrollTop ){
$('body').scrollTop(obj.eq(i).offset().top);
break;
}
$('body').scrollTop(obj.filter(':last').offset().top);
}
}
});
});
</script>
<div style='position: fixed; right: 0; top: 0;'>
<input type="button" value='위로' class='link-btn' />
<input type="button" value='아래로' class='link-btn' />
</div>
<div style='height: 300px;'></div>
<div style='border: 1px solid red;width: 300px;height: 50px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid blue;width: 300px;height: 80px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid purple;width: 300px;height: 120px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid yellow;width: 300px;height: 70px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid black;width: 300px;height: 200px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid green;width: 300px;height: 100px;' class='link-area'>제목줄</div><br>
<div style='border: 1px solid grey;width: 300px;height: 60px;' class='link-area'>제목줄</div><br>
<div style='height: 5000px;'></div>
</body>
</html>
반응형