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 */
}

Solution

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.

Comments

[ganesshkumar]

You have to manipulate the height of your content around 100% of the screen.

[Darryl Mendonez]

Yes, I have each main section with the following class: .full-screen { height: 100vh; }

[ganesshkumar]

Please create a jsfiddle for other to visualize where you got struck. Else, people will suggest and then you will end up adding code pieces little by little. Like .full-screen was not there in the question. How will someone know its presence?

[ceckenrode]

if it scrolls with the rest of the site, why is there a new chevron down arrow at the bottom of the section? does the first chevron down arrow disappear?

[Darryl Mendonez]

Good point @ganeeshkumar jsfiddle - jsfiddle.net/51mty7rm/7

[Darryl Mendonez]

@ceckenrode no, it just scrolls with the rest of the page

[zsawaf]

@DarrylMendonez FYI, position absolute won't behave as OP expects it to. It has to be fixed. It'll literally remain 100vh from the top of the screen, say a page has height of 300vh, it won't move with it. It needs to be position: fixed.

[Serlite]

@zsawaf The OP's intention is that the chevron "scrolls with the rest of the page" - ie. It shouldn't be fixed to a position in the window, but should move with the content when you scroll the page. position:fixed does quite the opposite of this; it attaches the element to a position on the screen, and doesn't move even when you the scroll the page.

[zsawaf]

You have it mixed up. I set up the case in my snippet, try forking it and changing it to absolute and see what happens.

[Serlite]

@zsawaf I don't think the OP wants the same arrow to persist throughout the entire page, based on the OP's requirement that on clicking it, "[the page] will scroll to the next section and there will be a new chevron down arrow". If you have the chevron fixed to the screen, that conflicts with this point, since it never disappears and thus never requires a "new chevron" later in the page.

[zsawaf]

Oh okay, if that's the case, I misunderstood the question. Apologies.

[Serlite]

@zsawaf Not a problem at all - it's never a bad idea to try to clarify a situation, since it's likely other people who will read this content might have the same questions as well.