[Resolved] Smooth scroll down to navigation

[Chris]

Hi,

I have a site with a full-screen header of the homepage and a down arrow at the centre bottom of the screen (absolute positioned) for visitors to click to scroll to the main navigation (#site-navigation). This is the CSS for the down arrow:

.down-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
}

The down arrow is placed using a Block Element hooked to before_navigation.

When smooth-scroll is disabled, the link works well, jumping to completely hide the full-screen header and displaying the main navigation at the top of the screen.

However, when smooth-scroll is enabled, the link smoothly only scrolls to 60px above the main navigation (which happens to be the height of the down arrow) and so continues to show part of the header.

Am I doing something wrong here?

Thanks in advance for your support!

[Ying]

Hi there,

Any chance you can link us to your site where we can see the issue?
You can use the private info field for this.

[Chris]

Hi,

Thanks for getting back to me. I’ve pasted the address in the private info field along with the password to view the site.

[David]

Hi there,

the GP Smooth Scroll offsets the scroll position by the height of the sticky navigation…. so its working as expected, it just doesn’t expect the link to be above the nav.

Are you using anchor links elsewhere on the site?
If you’re not then you can disable GP smooth scroll and enable the browser smooth scroll with CSS:

html {
    scroll-behavior: smooth;
}

[Chris]

Hi David,

That’s the only anchor link on the site, so that solution is good.

Many thanks!

Chris

[David]

You’re welcome

[Author]

Posts