Feature request – scroll down arrow option on Full Screen Page Header

[Robert]

I have Full Screen Page Header image (merge with Site Header),
Content is Vertical Centred,
all looks great.

I would like a scroll down ‘v’ arrow button at bottom of the screen
to indicate there is more content below the full screen image

Arrow button could trigger scroll equal to the screen height, to the bottom of Full Screen image.

I think such a scroll arrow would be a neat addition to the Full Screen Page Header options.

Thanks for consideration

[Tom]

Hi there,

Typically this can be added to the page header content super easily.

In GPP 1.6 we’ve introduced a smooth scroll option which will help as well 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Thanks for reply
I’m not a coder, I use GPP for my DIY website so can only use the UI, so the more check box options the better for me.
I’ll try to find someone to code it for me

Thanks

[Tom]

The problem with bundling it with the plugin is knowing where it links to.

For example, you could add this into your page header content:

<a href="#ANCHOR-ID" class="skip-down smooth-scroll"><i class="fa fa-angle-down"><!-- icon --></i></a>

Then you can style it with some CSS:

.skip-down {
    font-size: 25px;
}

Then you’d just replace ANCHOR-ID with the destination you want to jump to.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Thanks for you help

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Manuel]

I was also looking for something like this. This is what i found:

PageHeader content:

<div class="pageheader-scrolldown"><a href="#content" class="smooth-scroll"><span></span></a></div>

custom css:

.pageheader-scrolldown a span {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.pageheader-scrolldown a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: scrollDownButton 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes scrollDownButton {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scrollDownButton {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

[Tom]

That looks good to me 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts