<!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{ 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>