[Resolved] Make section fullscreen with smooth scroll

[Rodrigo]

I have a one-page layout for the website’s frontpage. The menu has 3 items, each one with with its proper section’s anchor. What I am trying to do is to show each section as a fullscreen block, just like the page header.

Looking around the Support forums for a solution I found this website: https://gsolution.co, and the feature I actually want is the same one. I just want that each text looks on a sole page, and when I click on a menu item the page scroll smootly to the next section.

I have tried to do this with Gutenberg blocks and the Sections module, and I believe it’s gonna be easier with the last one, but still can’t figure it how to do it.

[Leo]

Hi there,

I don’t believe that can be done easily with Sections or Gutenberg currently.

The example site you linked is using Elementor to create the effect.

Would you consider it?

[Rodrigo]

Yes. I was using Elementor on other websites and now I’m trying to avoid using such Builder. I feel is very heavy.

I do would need to use javascript, right?

How do you make the smooth scrool on your webiste?

[Leo]

We have built-in smooth scroll script:
https://docs.generatepress.com/article/smooth-scroll/

[Rodrigo]

Alright. Implemented! Thanks. Now… should I use JS for the fullscreen effect?

[Leo]

Yup if you can find a script that works.

This post offers some info:
https://generatepress.com/forums/topic/full-page-sections-with-snap-points/#post-481863

[Rodrigo]

This helped a lot! I added an anchor link for each section and then added a CSS rule to each section:

#section {
  height:100vh;
  display: flex;
  align-items: center;
}

This way the content is also centered vertically on page.

[Leo]

Awesome 🙂

[Warren]

I’d like to add a smooth-scroll that works via mouse, not via links. Is that possible via generatepress? See https://www.allangray.co.za/ as an example.

Thanks,

[Ying]

Hi Warren,

GP doesn’t have a built-in function like this, it will require custom development or using a plugin 🙂

[Author]

Posts