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

Haag

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

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

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? – Readily

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? – Math

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

@Math no, it just scrolls with the rest of the page – Haag

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.

Huertas

@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. – Salubrious

@Salubrious 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. – Huertas

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. – Salubrious

@Salubrious 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. – Huertas

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

@Salubrious 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. – Huertas

Answer 2

you can use vh dimension ( viewport height ) in your css , you should give your div a height by vh , for example:

div { height : 10vh }

it means your div has a height as long as 10 percent of every viewport that is showed on . after that get it a relative position and 90vh top

div {
    height : 10vh;
    position : relative;
    top : 90vh;
}

not that => height + top = 100
hope to be useful

Intendant