Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation

Hey guys, just wanted to point out one hidden feature of our smooth-scroll script - it will automatically treat the bottom of any fixed navigation as the “top” of the page. So if you have a fixed header, and scroll to a section, that section will align perfectly with the bottom of the header (instead of having the top of the section be hidden by the header).

In order for this to work, the header must have position: fixed and has to meet at least one of the following criteria:

  1. A standard Navbar component directly inside the body
  2. An element with a class named header or Header directly inside the body
  3. An element that has the <header> HTML5 tag (specified on the Settings tab)

A few other hidden features that might be useful:

  • You can add a custom attribute (on the Settings tab) called data-scroll-time to the <body> to affect the speed of the scroll. E.g. setting it to 2.0 will scroll twice as fast as default, while setting to 0.5 will perform a slower scroll.
  • You can add a custom attribute called scroll and set it to mid to scroll a section to the middle of the page (Center a section on smooth scroll - #12 by thewonglv - General - Forum | Webflow) - this takes into consideration fixed headers as well.
23 Likes

hi there!

this seems to be very nice to use but i cant get to understand how o do this? Is there anyway to send some screenshots of this?

Cheers!

1 Like

Here’s an example with a fixed navigation is in transparent light blue:

Without correct settings:
(As you can see the fixed navigation is overlapping the contact section and encroaching on the content inside. This example isn’t drastic, but if the top padding on this section is smaller the problem would be more noticeable)

With correct settings described above by @callmevlad:
(As you can see the bottom of the fixed navigation is at the top of the contact section, not overlapping it)

Hey guys, thanks for the awesome feature, I really needed a way to increase the speed of scrolling to different sections using navbar links.
Just a quick tip: a value of 0.5 actually makes scrolling 2x faster, while a value of 2 slows it down. It might be me, but I got the opposite impression from the initial post by @callmevlad.

2 Likes

I moved 2 posts to a new topic: Issue with smooth scroll not aligning, using fixed header

Sorry to resurrect an old topic but I am having a new issue with this. I have a position:fixed header that starts off display:none but through an interaction (when you scroll past a certain point) it slides down into view. I had used callmevlad’s suggestion and set the element to have a HTML5 tag and everything was dandy with my in-page linking.

However, recently the header has reverted to covering the the top portion of the section of the page I am trying to link to. As far as I know, nothing about the page has changed but this feature has stopped working and I am bamboozled as to why. Any ideas?

can you push an example webflow site for callmevlad tip?

thanks
toby

2 posts were split to a new topic: Need help with smooth scroll section linking

2 posts were merged into an existing topic: Need help with smooth scroll section linking

Now you need to use the selection of Header from the settings tab for this to work correctly on a published site.
The others methods outlined above will work in PREVIEW, but apparently not on a published site.

Just saved my life! Thanks @callmevlad!

Hey Guys,

This is going to sound weird. I have a nav bar on http://apd.webflow.io and I made it fixed with a transparent background. The problem is though that I want the section scroll to go all the way up under the nav bar. I am using a menu icon on all breakpoints to open the menu.

My other issue is the links in the menu… Although linked to the proper section… They do not scroll to the proper sections… For starters the about section when clicked just scrolls to the slider… And the other sections scrolls to the section above them.

Published: http://apd.webflow.io
Read Only: https://preview.webflow.com/preview/apd?preview=a9468e6e5ee21173f6179b47d22a4e3e

This issue seems to back. I can’t edit the top level element to be < header > via the setting tab in workflow so the scroll covers the top of each section on the page.
I can edit the dom via chrome tools and it works ok, allowing the correct offset for the size of the nav bar.

I also had a problem with the sections scrolling to the top of the page, not to the bottom of the fixed Navbar. The solution was to uncheck “Disable scroll offset when fixed” in the Navbar settings.

1 Like