Navigation Anchor Issues

I’m needing some help solving one of many problems on my site. This one has to do with navigation buttons and anchor points. When I click on a link, it takes me to a random spot on the page every time, even after I click the same link a second time. Sometimes it gets close, sometimes, not. I can’t seem to figure out the problem or even a workaround.

Thank you in advance,
Scottie


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

Hello @scottiejhaines

Have you resolved the issue I went into your project and everything seems to be working just fine. Let me know if you need any help otherwise we can close this thread.

Interesting, the problem still exists on my end. I’m using chrome if that makes any difference.

I am losing my mind over this! I have tried every different thing that I can think of. I’m wondering if it has something to do with values higher up in the hierarchy. Surely this can’t be a thing only on my computer. If it makes a difference figuring this out, my animated sections aren’t sliding into view like they should when I am taken to the anchor area either. This scroll set up is turning out to be a disaster.

Hello @scottiejhaines

I know that sometimes this can be very frustrating. Can you record a small video of what you’re experiencing?

Like I said I’m not seeing the issues :thinking:

What is the best method for making a screen capture video on here?

You can record your screen with https://www.getcloudapp.com

Scrolling%20Problem

It seems like it lands about where it should after clicking the nav button 3 times.

Mmmm this is interesting :thinking:

Maybe the guys at @webflow can jump in, I don’t see why this could be happening.

I’m wondering if this same problem is also causing extra (or not enough) space left over at the bottom, depending on the size of the browser window.

Is it possible that I need to be using a scrolling div instead of an animated (scrolling) div to fix the scrolling issues? Is the custom scrollbar something I can recreate in CSS? I have seen webkit lines out there for that, but didn’t understand where I’m supposed to put the specific code in webflow.

I’ve experienced same thing and problem was because of ix2 interaction. There was a moving element with scroll. I’ve chosen that element as an anchor point so it made several jumps. It is very normal. You have to select exactly position element and choose them as anchor points.

also I just checked your site and it seem there is some issue with the page loading. It doesnt seem right. I cant be sure before going in full detail.

Hi @scottiejhaines

This is definitely bizarre — I was able to see this behavior in your site. This may be a bug, but there’s also a chance that your unique layout is causing the anchor links to have this odd behavior. To be sure, though, I’ve escalated this to the rest of the team to investigate further.

I’ll post back here with more details as soon as I have them. :bowing_man:

1 Like

By unique, do you mean poorly designed? :rofl::rofl::rofl:

I’m pretty new to Webflow. If I can figure out how to use webkit css in my design, I’ll just go that route with the scrollbar and that should fix it… But the problem is, I’m still trying to figure out how to do that. I’m a designer, not a coder (yet).

By unique, do you mean poorly designed?

Definitely not poorly designed! I think the site looks awesome! I was referring more to the unique layout. That is, you have a background that takes up the full width, and your content rests on top of these sections. So the main container your content is nested in is being scrolled rather than the body of your page.

1 Like

I figured out how to create a custom (real) scrollbar that looks exactly like the original. Now the problem I am running into is that my links don’t work. Is it not possible to scroll a div with anchor links? I refuse to believe it can’t be done. Seems like I remember people doing this back in the iframe days.

Is it not possible to scroll a div with anchor links

Great question, it definitely should be possible as long as you have the navlinks and IDs set up correctly (you do).

I’ll be sure to reach back out though when the team has investigated this further. Thanks for your patience :bowing_man:

I have moved this site into a new copy (in case I needed to revert) where I made changes including the new scrollbar and removal of the now unnecessary scroll animations which can be found here. Also, the live copy can be seen here, since it’s necessary for custom CSS. Password is ‘clean’.

So I am trying to make my new setup work using javascript to link to anchors inside of a DIV, but only halfway know what I’m doing. I’m still learning! If you are familiar with javascript, could you take a look and see if I am putting the code in the right places in the editor? I have only tried linking the ‘Wash Packages’ button with its anchor for now. Refer to post #18 for the updated link.

Hi @scottiejhaines

Great questions! To be honest, I am not versed enough with JS myself to say if this is correct. That said, I took a look at your site but didn’t see any custom code. I recommend looking through our custom code and HTML embed videos/articles to get a better idea of how to integrate custom JS.