html - CSS：如何让元素在滚动时保持在同一个位置而不是随着页面向下滚动？

Question

问题是我试图在屏幕底部中心创建一个一直在弹跳的箭头。当点击它时，它会向下滚动到某个点。我有滚动脚本，解决了问题是当我输入位置时：固定箭头随着页面向下滚动但是当我写位置时：绝对元素粘在左边并且边距不起作用，应该怎么做我愿意？

这是我的代码：

(HTML)

<div class="arrow bounce">
<a class="fa fa-arrow-down fa-2x" href="#About"></a>
</div>

(CSS)

@bg: #fff; // White
@primary: #fff; // White

body { background: @bg;}
a { color: white; text-decoration: none; }

.arrow {
text-align: center;
margin: 8% 0;


}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}

.arrow, .bounce{
position:fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
 }
}

标签： htmlcss