今天在制作首页导航图特效demo时，无意发现一个奇怪的交互现象，故记录
经测试，简化了触发该现象的代码，如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@keyframes move_top{
0%{ top: 350px; }
100%{ top: 0; }
}
*{
margin: 0;
padding: 0;
}
html{
/*去除滚动条*/
overflow: hidden;
}
div{
width: 100%;
height: 100%;
position: absolute;
background: #000;
z-index: -1;
}
a{
display: block;
width: 100px;
height: 100px;
background: #acf;
}
#moveBox:target{
/*使用动画*/
animation: move_top 1s 1;
}
</style>
</head>
<body>
<div id="moveBox"></div>
<a href="#moveBox"></a>
</body>
</html>
在点击a标签后，moveBox并未如预期所想从距顶部350px位置到距顶部0px位置，而是a标签从屏幕上方进入屏幕。
去除html的overflow属性后，可发现当点击a标签时，页面出现一个滚动条，同时滚动条的可滚动长度在不断的缩小，同时a标签从上方进入可视区域。
把animation的循环次数从1改成大于1时，从第二次动画开始，动画效果符合预期。
修改moveBox的position属性的值为fixed可不触发该现象。