Streaming live at 10am (PST)

Center a section on smooth scroll


#1

Hi guys!

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. https://www.spotify.com/us/ has a nice example as you click the arrows down.

Any ideas?

Thanks, Matthew


Center section on smooth scroll
#2

Hey and welcome to Webflow Forum smile

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 smile


#3

Thanks @bartekkustra!


#4

@matthew1818 I'm looking into making our scrolling more configurable, will report back soon...

Just curious, is it one specific section that you want to center, or do you want that type of behavior across the entire site for all named elements?


#5

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.

Thanks @callmevlad! I appreciate the help!


#6

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:

  1. 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:

  2. 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.

Enjoy, and let me know if you find any bugs! smiley


In-Page Linking Position
#7

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?


#8

It works! @callmevlad you are awesome! And I'll def let you know if I find any bugs.

This customer support is why I'm going to keep telling my web friends they have to check out webflow. Love you guys!


Data-scroll = "mid" on tall elements
#9

@matthew1818, great to hear! smile

@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.


#10

@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).

Any way to disable the smooth scroll?


#11

Hey @matthew1818, that's a really clever way to enable a mobile menu! smiley

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.


#12

I moved 5 posts to an existing topic: Adjust speed of scrolling code in webflow.js


#16

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?


#17

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


#18

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.


#19