Heojju

OnePage 간단한 코딩 본문

웹개발

OnePage 간단한 코딩

우주별 2017. 1. 31. 14:40
<html>
<head>
<title>OnePage</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.page{height:100vh;}
</style>
</head>
<body>
<div id='wrap'>
<a href="javascript_:changeScrollTop(0)">1page</a>
<a href="javascript_:changeScrollTop(1)">2page</a>
<a href="javascript_:changeScrollTop(2)">3page</a>
<a href="javascript_:changeScrollTop(3)">4page</a>
<div class='page' id='1page'>1page</div>
<div class='page' id='2page'>2page</div>
<div class='page' id='3page'>3page</div>
<div class='page' id='4page'>4page</div>
</div>
</body>
<script>
function stopWheel(e){
if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */
if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
e.returnValue = false; /* IE7, IE8 */
}
$("#1page").on('mousewheel DOMMouseScroll', function(e){
stopWheel();
var E = e.originalEvent;
delta = 0;
if (E.detail) {
delta = E.detail * -40;
//$('span').text(delta);
}else{
delta = E.wheelDelta;
//$('span').text(delta);
if(delta == 120){
//wheel up
}else if(delta == -120){
//wheel down
changeScrollTop(1);
}
};
});
$("#2page").on('mousewheel DOMMouseScroll', function(e){
stopWheel();
var E = e.originalEvent;
delta = 0;
if (E.detail) {
delta = E.detail * -40;
//$('span').text(delta);
}else{
delta = E.wheelDelta;
//$('span').text(delta);
if(delta == 120){
//wheel up
changeScrollTop(0);
}else if(delta == -120){
//wheel down
changeScrollTop(2);
}
};
});
$("#3page").on('mousewheel DOMMouseScroll', function(e){
stopWheel();
var E = e.originalEvent;
delta = 0;
if (E.detail) {
delta = E.detail * -40;
//$('span').text(delta);
}else{
delta = E.wheelDelta;
//$('span').text(delta);
if(delta == 120){
//wheel up
changeScrollTop(1);
}else if(delta == -120){
//wheel down
changeScrollTop(3);
}
};
});
$("#4page").on('mousewheel DOMMouseScroll', function(e){
stopWheel();
var E = e.originalEvent;
delta = 0;
if (E.detail) {
delta = E.detail * -40;
//$('span').text(delta);
}else{
delta = E.wheelDelta;
//$('span').text(delta);
if(delta == 120){
//wheel up
changeScrollTop(2);
}else if(delta == -120){
//wheel down;
}
};
});

function changeScrollTop(num){
if(num==0){
$("html, body").stop().animate({ scrollTop: 0}, 500);
}else if(num==1){
$("html, body").stop().animate({ scrollTop: document.body.clientHeight},
1000);
}else if(num==2){
$("html, body").stop().animate({ scrollTop: (document.body.clientHeight*2)},
1000);
}else if(num==3){
$("html, body").stop().animate({ scrollTop: (document.body.clientHeight*3)},
1000);
}
}
</script>
</html>



'웹개발' 카테고리의 다른 글

[웹개발] 쿠키와 세션  (0) 2017.12.26
마우스 클릭시 근처에 레이어 띄우기  (0) 2017.06.08
Parallax 패럴렉스 스크롤 간단한 코딩  (0) 2017.02.22
[CSS][JavaScript][JQuery] 이미지 어두워지는 방법  (0) 2017.02.02
[PHP][JavaScript] php 배열을 자바스크립트에서 배열로 받기  (0) 2017.01.03
'웹개발' Related Articles more