css - 如何在加载时将元素定位在屏幕底部但不固定？

Question

我正在尝试在我的页面底部放置一个 V 形向下箭头，以便用户可以在单击时平滑滚动到下一部分。无论屏幕的设备或尺寸如何，我都希望该位置始终靠近底部，我不希望它留在原地。它应该与网站的其余部分一起滚动。当用户单击它时，它将滚动到下一部分，并且在屏幕底部也会有一个新的 V 形向下箭头链接到下一部分。

HTML

<div class="row chevron-down">
  <div class="col-md-12">
    <a href="#aboutus1" class="smoothScroll"><img class="img-responsive visible-xs center-block" src="img/chevron-down.png" alt="Transformative Thinking" /></a>
  </div>
</div>

CSS

.chevron-down {
  /* magic code here */
}

Answer 1

可能有几种方法可以解决这个问题，但绝对定位与几个 CSS3 功能相结合是我的第一个想法。使用 top:100vh 将人字形发送到屏幕底部，然后使用 translateY(-100%) 将它带到底部上方(所以它不在下方)开始时的视口(viewport)):

.chevron-down {
    position:absolute;
    top:100vh;
    transform:translateY(-100%);
    width:100%;
}

这是一个 Bootply展示。希望这可以帮助!如果您有任何问题，请告诉我。