Streaming live at 10am (PST)

Links that jump to section on page don't work


#1

Hi everyone, I've dug webflow's forum for quite a bit but couldn't find anything that solved my problem.

The closest is this one, but our friend was using an external custom jquery plugin, whereas I don't have any plugin on the site whatsoever.

Context:
- I have 2 columns.
- The left column is 1/3 of the page.
- The right column is 2/3 of the page.
- Each column's height set to 100vh.
- Each column has Overflow set to Scroll.
- Inside the right column I have some sections with distinct IDs
- Inside the left column I have some links that link to the respective IDs on the right column
- Both columns scroll perfectly fine independently.
- Accessing a url with an ID parameter on the right columns works perfectly fine (e.g http://paths.webflow.io/styleguide#footer)

The columns with links:

The link to the section itself:

The section with the ID:

Problem:
- The links on the left column that link to the respective sections IDs on the right column don't work.

The page itself:
http://paths.webflow.io/styleguide#footer

Link to the project:
https://preview.webflow.com/preview/paths?preview=84dd6f06740c87b95bcd6ef3519aa4bc

Test I've already tried:
- Removing Scroll from the columns property Overflow re-allow the links to work BUT now the 2 columns cannot be both 100vh and scrolled independently anymore.

Help greatly appreciated.

ps: @PixelGeek you might have the most context here since you answered something closely related.


#2

Difficult to show you with your site because there is so many elements in the right columns, but to achieve such a layout, the ROW elements isn't a good choice (sorry). Your links don't work because of it.

Use the ROW elements to break down elements in columns, but for a full layout, use divs.

Use a first div for your columns and then a second one for the main content. Put your sections into the second one and you IDS on the sections. Put a section per "chapter" so your structure is well broken down. Finally, use ROW elements to present content on columns into the section into the right div.

And then your links to IDs will work. Also try not to put any weird character in the IDs names, just letters and no space. yeah, one word. From experience :slight_smile:

Sorry that you probably have to redo the structure and drag one by one all the elements inside your main second column. try to break the content down in a better structure on the way. As many top section than menu entries, then titles and rows for content.


#3

Thanks @vincent.

  1. I'm going to duplicate that page and move each column into a div instead.
  2. If that doesn't work I will escalate to trying to put all the content into sections. That page started just as a dump of symbols and isn't intended to be semantic nor referenced in anyway, but better take the good habit anyways I guess.

The IDs' name should be good then.

Coming back to update the thread in a bit.


#4

I just tried 1. and replaced the columns by divs (still 100vh, overflow scroll) and the links still don't work.

updated dashboard link: https://preview.webflow.com/preview/paths?preview=9efbdab7fae306ddbd94e8a6d4f0799b (page title: Home using divs)

Again, setting Overflow to Visible instead of Scroll break the independent scrolling of the two divs, but now the links are working (so the issue is not with the ID names for sure). Just like when I was using the columns.

Looks like columns might not the problem here.

I'm not sure trying 2. will yield any difference given the above.

Any other ideas?


#5

Yes. I made a styleguide a while ago that works exactly like yours. I used a menu element for the.. menu part. Dead simple, a fixed vertical menu 100% height of 200px wdth, and sections with a 200px margin. Not even a container for the sections. Basically the page is seen by HTML as a normal vertical page.

Here is the sharing link: https://preview.webflow.com/preview/kds-styleguide?preview=cf0c9f02af8be9912c17e2c711f15b66

Tell me if you get the structure and if that helps. It's so simple that I think it's unnecessary that I transfer the site to you.

Don't forget to give the following properties to your menu so that the called IDs will scroll to the top of the screen instead of stopping before entering the screen.

Sorry I haven't thought about that before...


#6

A menu element, to create a menu.. Duh. Why haven't had thought of that.

Trying and will be back.


#7

Okay, I got to the bottom of this. The links are now working, but there's a scrolling glitch. You can scroll the two column independently, but upon reaching the bottom of the left column, you start scrolling whatever content is on the right.

The glitch in action:

@vincent I noticed that in your styleguide, the left menu was fixed but not scrollable, which means on small laptop, I can't see links at the bottom of the menu (forms, animation, banner)

Links problem:
The real problem seems not due to having all the sections inside a container, nor using a menu. In fact I'm using a main content container that houses a lot of divs some of which have IDs, and the links work perfectly fine.

What does not work however is having both the links work and no scroll glitch.

If you remove the glitch by setting your most parent container to 100vh, overflow:scrollable, then the links stops working. If you remove 100vh and scrollable, now the links work but you have the glitch.

I've dug a lot but can't find any solution that marry the links working and no glitch.

@vincent the links are now working at least, which was definitely the primary bug. Thanks again for the help.

If anyone finds a fix to the scroll glitch, please @me or reference this thread, that way we can close the loop (if closable the loop is..)


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.