Page Section Link Not Functioning

Hey everyone,

Not sure why my page’s section links aren’t working on the sidebar located on the right of the webpage.

When I click on one of the text links (Landing, Featured, About, or Footer), it doesn’t take me to the section. The browser viewport just stays stagnate.

Any solutions?
See below for my read-only.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Zach,

I went to take a peek and I don’t think your site is displaying correctly at the moment… is this what you’re seeing?

Hi Colin!

Try now. My bad, been messing around.

Best,
Zach

Hey Zach!

Great, thanks for letting me know. Went back and poked around. I think the issue is arising because you’ve got all of the sections in the scroll snap wrapper; the moment I moved them outside of that, the links function as desired.

I’ve never used scroll-snap myself, so I’m unsure of how exactly to fix it without taking a bit of time to troubleshoot. It may be that scroll-snap and Webflow don’t play nicely (as in, custom code can sometimes break pages); it may be the wrapper itself (as in, it may function applied to the body element instead).

However, the immediate fix is to simply move your content out of the wrapper. :blush:

If I have time I’ll try and brainstorm a solution! Sorry this is an identified-your-problem and not a solved-the-issue response.

Colin

Ah, thanks for the help. I see the issue.

If anyone has any solutions to this, let Colin and I know!

Unfortunately, I can’t take the sections out of the snap-scroll-wrapper without sacrificing the snap-scroll functionality; which is important for this site.

@vincent may need some expert advice here.

Scroll snap is almost not supported apart from chrome.
The scroll snap on this site doesn’t work on my chrome and Canary.
I don’t think “start” is a value for scroll-snap.

Anchors don’t work inside of a scroll snap container, nor they work with a js solution such as fullpage.js. Because both are kinda hacking the scroll. (well the former redefines it and the latter hacks it entirely).

Soooo…. what about ditching the scroll snap anyway?

1 Like

Hey Vincent,

Thanks, sounds like I’m going to need to ditch it. Appreciate your time.

Best,
Zach

You may already know about it, Zach, but Can I Use? is an excellent resource when considering adding additional front-end tech that Webflow doesn’t natively support. For anyone else adding custom code, it’s a great resource to verify cross-browser support. :blush:

1 Like

Thanks for sharing! @ColinSimmons Will check this out.

Sometimes it is very good to avoid using the libs to improve performance and the size of the page.
I think that Webflow needs to fix this bug if the HTML (no javascript) works.
IMO, I consider it a high priority to avoid side effects.

How is scroll snap not supported?

I tested it from a blank HTML and it works fine with navigation, no javascript.
This step and step show that the Webflow has side effects with native feature:

  1. This project, the navigation is not working (https://preview.webflow.com/preview/scroll-snap-with-nav?utm_medium=preview_link&utm_source=designer&utm_content=scroll-snap-with-nav&preview=bb54131f79a8c45d86fd1e53f863318d&workflow=preview;)
  2. Export the code;
  3. Remove all javascript in HTML;
  4. Save and test the navigation that works (as like this code https://codepen.io/zullcore/pen/dyVGwQz).

Not think that have a side effect by script Webflow?

Hey!
Any chance you could help me out? I have “portfolio” linked in my navbar at the top of my page, when I click it literally does nothing. I named the section portfolio and that wasn’t working so i renamed it 12345 and the div inside of it that holds the content 6789 just to see if the issue was that both the section and the div were named the same thing. Apparently, that has nothing to do with it.

Read Only link: Webflow - LT² Photography | Weddings | Engagements | Maternity | New Born