Hash Smooth Scroll - take fixed header height into account

[conorseed]

Hey there, Just wondering if it’s possible to force the smooth scroll on hash navigation to take into account the height of a fixed header?

Happy to code my own solution if needed (although not ideal), but thought it was strange that there was no simple solution for this.

Thanks, Conor

[marc_a]

Hi Conor,

Thanks for reaching out.

By default the hash navigation has already a smooth scroll effect. If you are expecting for another behavior then that will require some customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[conorseed]

Hey @marc_a, Thanks for the response.

I’m fully aware that the effect already exists. What I’m wanting is to modify that behaviour to take into account the height of any fixed/sticky headers.

If there’s no solution already I’ll code it myself and post it here for the community to find. Just thought others in the community may have already requested this.

[tristup]

Hi Conor,

If you are using Pro, please try updating to the latest version of Pro as we have already fixed the header offset bug.

If that does not work for you, you can find some alternative solutions in the following threads.

OnePage navigation with Header Builder Pro Final fix

This is the final code to get the OnePage working including offset so content doesn’t get hidden behind nav-bar =) jQuery(document).ready(function($) { $('.x-menu-collapsed .x-anchor').on( "click touchstart", function(e) { e.preventDefault(); $('.x-off-canvas-close').click(); }); $('a[href*="#"]').on('click touchstart', function(e) { setTimeout ( function() { e.preventDefault(); var hash = '#' + $(this).attr('href').split('#')[1]; if ( hash == '…

Solution: Offset anchor using one page navigation and sticky header together

Turn on One Page Navigation Define a Raw Content area just above the section you want to scroll to. Place this in it: <a class="anchor" id="name-of-section"></a>, build out your content as usual below Add your css: a.anchor {display:block;position:relative;top:-155px;visibility:hidden;} where -155px is the offset amount you desire Create your menu using custom links referencing your anchors: #name-of-section Profit

Please remember that the code in the reference threads is sample code, and it varies from case to case, and we can’t guarantee it works for you.

Thanks