How to position an element at the bottom of the screen on load but not make it fixed?

Question

I am trying to position a chevron down arrow at the bottom of my page that would allow the user to smooth scroll to the next section on click. I would like the position to always be close to the bottom no matter what device or size of the screen and I do not want it to stay in place. It should scroll along with the rest of the site. When the user clicks it it will scroll to the next section and there will be a new chevron down arrow also at the bottom of the screen linking to the next section.

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

There are probably a few ways to go about it, but absolute positioning combined with a couple of CSS3 features was my first thought. Use top:100vh to send the chevron to the bottom of the screen, then translateY(-100%) to bring it just above the bottom (so it isn't below the viewport at the start):

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

Here's a Bootply to demonstrate. Hope this helps! Let me know if you have any questions.