我想在http://www.squaredot.eu/#Intro在向下滚动,100vh滚动至底部
来达到同样的效果所以,如果我向下滚动,身体必须100vh滚动至底部。而且如果向上滚动,身体必须滚动100vh。我尝试了一些,但没有成功。
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Log In </title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
</body>
</html>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#e1 {
width: 100%;
height: 100vh;
background-color: red;
}
#e2 {
width: 100%;
height: 100vh;
background-color: green;
}
#e3 {
width: 100%;
height: 100vh;
background-color: yellow;
}
#e4 {
width: 100%;
height: 100vh;
background-color: blue;
}
#e5 {
width: 100%;
height: 100vh;
background-color: orange;
}
JAVASCRIPT
document.addEventListener('scroll', function(e) {
var currScroll = document.body.scrollTop;
document.body.scrollTop = calc(~"currScroll + 100vh");
}
);
可能的复制[jQuery的平滑滚动到锚?](http://stackoverflow.com/questions/4198041/jquery-smooth-scroll-to-an-anchor) – starcorn
我找不到解决方案。我认为'100vh'是问题 – Soccerlife