滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
body{
height: 100%;
/*position: relative;
top: 0;*/
/*transition: */
}
html{
height: 100%;
overflow: hidden;
}
.box{
height: 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%!important;
}
.box:nth-child(1){
background: url(images/g1.jpg) no-repeat center center;
}
.box:nth-child(2){
background: url(images/g2.jpg) no-repeat center center;
}
.box:nth-child(3){
background: url(images/g3.jpg) no-repeat center center;
}
.box:nth-child(4){
background: url(images/g4.jpg) no-repeat center center;
}
.ul-control{
position: fixed;/*浮动定位*/
left: 15%;
top: 50%;
margin-top: -47px;
border: 1px solid orange;
}
.ul-control li{
list-style: none;
border: 1px solid red;
width: 25px;
height: 25px;
border-radius: 50%;
}
.ul-control li.on{
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<ul class="ul-control">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/jquery.js"></script>
<script>
var _index;
var h=$(‘body‘).height();
$(".ul-control li").click(function(){
_index=$(this).index();
$(this).addClass(‘on‘).siblings().removeClass(‘on‘);
$(‘html,body‘).animate({"scrollTop":_index*h+"px"},1000);
// $("body").animate({"scrollTop":_index*h+"px"},1000);
});
</script>
</body>
</html>