<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion and Design </title>
<link rel="stylesheet" media="screen" type="text/css" href="./images/playink_style.css" /> // 스타일 시트 불러오기
</head> <!-- 예제 div 영역 -->
< section>상단</section> <section>content
<div>
</div>
</section> <section>
<div>
</div>
</section> <section>하단</section>
<!-- 스크롤 버튼 영역 -->
< div id="backtotop">
<div class="s_top"><a title="맨위로">▲</a></div> // 풍선글 적용
<div class="s_up"><a title="윗 단락 가기">∧</a></div>
<div class="s_down"><a title="아랫 단락 가기">∨</a></div>
</div> <!-- jquery 영역 -->
< script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script> //jquery 스크립트 로드 링크
<script>
$(function() { // 아래 섹션으로 이동 function
var $window = $(window);
$('.s_down').on('click', function(){
$('section').each(function() {
var pos = $(this).offset().top;
console.log("pos: " + pos, "$window.scrollTop(): " + $window.scrollTop());
if ($window.scrollTop() < pos) { // if구문 끝부분일 경우 pos값 적용
$('html, body').animate({
scrollTop: pos
}, 1000); // 1000은 속도 값 개인 취향에 맞게
return false;
}
});
});
$('.s_up').click(function(){ // 아래 섹션으로 이동 function
$($('section').get().reverse()).each(function() {
var pos = $(this).offset().top;
if ($window.scrollTop() > pos) { // 위 섹션으로 pos값 적용
$('html, body').animate({
scrollTop: pos
}, 1000); // 1000은 속도 값 개인 취향에 맞게
return false;
}
});
});
}); $(function() { // 많이 사용되는 top 버튼 function
$(window).scroll(function() {
if($(this).scrollTop() != 0) { // 스크롤이 top에서 0일경우
$('#backtotop').fadeIn(); // fade in / out 적용
} else {
$('#backtotop').fadeOut();
}
});
$('.s_top').click(function() { // 스크롤 속도 값 1000 적용
$('body,html').animate({scrollTop:0},1000);
});
});
</script> <body>
</body>
</html>
| 
jq.zip
