<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.3.js"></script>
<style>
html{overflow-
y: hidden}
*{padding: 0
;
margin: 0
;}
div{height:672px;}
div:nth-child(1){background: #128
;}
div:nth-child(2){background: #152
;}
div:nth-child(3){background: #194
;}
div:nth-child(4){background: #166
;}
div:nth-child(5){background: #576
;}
div:nth-child(6){background: #428
;}
div:nth-child(7){background: #784
;}
ul{position: fixed;top:50%;right:0;list-
style: none;}
ul>
li{width: 50px;height:50px;
border: 1px solid #555
;
border-radius: 50%
;
text-
align: center;
line-
height: 50px;
background-color: #119944
;}
</style>
</head>
<body>
<div id="d1"><h1>这是第一屏</h1></div>
<div id="d2"><h1>这是第二屏</h1></div>
<div id="d3"><h1>这是第三屏</h1></div>
<div id="d4"><h1>这是第四屏</h1></div>
<div id="d5"><h1>这是第5屏</h1></div>
<div id="d6"><h1>这是第6屏</h1></div>
<div id="d7"><h1>这是第7屏</h1></div>
<ul>
<li data-target="d1">一屏</li>
<li data-target="d2">二屏</li>
<li data-target="d3">三屏</li>
<li data-target="d4">四屏</li>
</ul>
<script>
var h1=$("#d1"
).offset().top;
var h2=$("#d2"
).offset().top;
var h3=$("#d3"
).offset().top;
var h4=$("#d4"
).offset().top;
var flag=
false;
document.addEventListener("mousewheel",
function (e) {
if(flag)
return;
flag=
true;
var change=0
;
var screenHeight=
$(window).height();
console.log(screenHeight);
change=e.deltaY>0?screenHeight:-
screenHeight;
var h=$(document.body).scrollTop()+
change;
$(document.body).animate({scrollTop:h},500,
function () {
flag=
false;
});
});
$("[data-target='d1']").click(
function () {
$(document.body).animate({scrollTop:h1},500
);
});
$("[data-target='d2']").click(
function () {
$(document.body).animate({scrollTop:h2},500
);
});
$("[data-target='d3']").click(
function () {
$(document.body).animate({scrollTop:h3},500
);
});
$("[data-target='d4']").click(
function () {
$(document.body).animate({scrollTop:h4},500
);
});
</script>
</body>
</html>
转载于:https://www.cnblogs.com/alasq/p/6045675.html
