title: How to position an element at the bottom of the screen on load but not make it fixed?
body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row chevron-down"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;a href="#aboutus1" class="smoothScroll"&gt;&lt;img class="img-responsive visible-xs center-block" src="img/chevron-down.png" alt="Transformative Thinking" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.chevron-down {
    /* magic code here */
  }
  </code></pre>