I’m trying to center a section in the middle of the screen when a user clicks on a in page link. So, currently it smooth scrolls to the top of the section, but I’d like to offset that so that it leaves equal room at top and bottom. Spotify - Web Player: Music for everyone has a nice example as you click the arrows down.
I don’t know the current structure of smooth scrolling since it’s different from what I did before webflow implemented it… It would be best to pin @danro or @callmevlad here. He’ll probably help you with this issue if it’s possible
For the site I’m working on now it will be all elements, but I could see how choosing just one section would be nice. Here’s the site I’m working on → http://thryver.webflow.com/
You’ll notice each section is the same structure.
Hey @matthew1818, I just added a way to enable this, but it requires you to configure it a bit manually. For any section that you want to scroll into view in the middle of the view port, add a new custom attribute called data-scroll and set its value to mid. Here’s how you do it:
Select the element that you are scrolling to (not the link that triggers the scroll), go to the Settings tab, and click on + to add a new custom attribute:
Set attribute details and press ‘Save’:
Once you do that (for each section that you want to have this behavior), Webflow should automatically scroll so that this element is in the middle of the page (even on page load if you have a URL to that specific part of the page). You’ll need to refresh your designer for this to work in preview mode, and republish your page for it to work externally.
What about the moment when the section will be higher than the window height? Will it scroll to the middle of the section and hide a content that is outside of the window height?
@bartekkustra, I just pushed a fix to ignore the ‘mid’ scroll functionality when the element is too tall to fit in the window (accounting for fixed headers as well), so it will simply scroll to the top.
@callmevlad while we are talking about scrolling - is there a way to turn off smooth scrolling? For example, on my bulldawgbrawl.webflow.com site if you resize the browser for mobile you’ll notice the menu hamburger smooth scrolls to the menu (I made this site before the new webflow menu function).
Hey @matthew1818, that’s a really clever way to enable a mobile menu!
Right now, there is not a way to disable smooth scroll, but I can add one soon. It would involve adding a custom attribute to the body to set the scroll duration to 0ms. Will update with details once it’s implemented.
Hi, this is very handy and all, but what if you have a transparent nav and you want the section to scroll all the way to the top of the page, ignoring the nav?
Hi, I have a problem, when I set a link to scroll to a section, even with the ‘data-scroll=mid’ attribute, the section takes the navbar into account and moves the section slightly down to fit the navbar, even if the navbar is set to display none? Here is a link to view: http://cloudfusion-55c841.webflow.io/#section1
Late answer to your question, there’s a small bug you can use to disable smooth scroll at the moment: start your section Unique ID name with a digit. Like “1section”. The link will still work but no smooth effect.