[Resolved] Scroll down button fixed to bottom of a container

[Greg]

Hi all,

I’m trying to add a scroll down arrow button to the bottom of a full-page container (100vh). I’ve used the bits from Tom and David in this thread: https://generatepress.com/forums/topic/scroll-down-button-for-head-on-library-item/

But, I’m having problems getting it to align with the bottom of the container. I think this is due to my content in the container being vertically centered.

Any ideas on a workaround for this?

Many thanks,
Greg

[David]

Hi there,

yes thats correct, the vertical align center will affect that.
The options are:

A. Don’t use the vertical align and use padding to add space where its required.

OR

B. i) Select the Container Block, and give it a class of: relative-parent
ii) add this CSS to:

.relative-parent .gb-inside-container {
    position: static;
}

Then your hero-jump-link absolute position should be relative to the outer container.
the only issue – it may affect z-index…. let us know.

[Greg]

Hi David,

Option B works just as I hoped, thank-you!

No issue with z-index, yet.

Thanks,
Greg

[David]

Glad to hear that 🙂

[Author]

Posts