How to link to section in another scrollable div

Design help General
1

I have 2 main large divs. The left div is a vertical catalog of 12 items with general info for each item.
In the right div is all the detail information of each item (with images) in a long scrollable div, each item info in its own section in the div.
When I click on an item’s title in the left div, I want to scroll to the associated section in the right div for that item.
I also want to be able to just scroll up and down the right div to see any section I want, that’s why I want a long scrollable right div.
My problem is that I cannot find a way to make the right div scroll to a specific section. Any ideas?
Thanks!

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

2

Hi @gkoll,

Can you please provide a read-only link to your project? You can do this via the share button in the top right corner of the Designer.

It sound to me like you are looking for a sticky gallery, but it’s hard to tell without seeing under the bonnet.

Regards,

Alex

3

Thanks. I needed to scrub private things from it first.

This feature I’m looking for is only for the desktop format. The window should be widened to display left / right divs side by side.

When I click on Prop 2 in left div, I want the right div to scroll to Prop 2 and so forth for all props.
At any given time, I want to be able to manually scroll up and down the right div.

https://preview.webflow.com/preview/sample-tmp?utm_medium=preview_link&utm_source=designer&utm_content=sample-tmp&preview=d5e8e90a7150e175a879c7fbe8c82ea3&workflow=preview

4

Great.

You need to add all the titles in the left div (Prop X, 1, 2 etc) in separate link blocks.

After that set ID’s in the Element settings for each div in the right column.

Finally, go back to the link blocks and connect them from the Element settings - Link settings - Page section and select the ID’s for each one.

Set the left div to height - auto. Position Sticky - 0% at the top.
Set the right div to height - auto.

Let me know if it works and this is what you are looking to achieve.

Regards,

Alex.

1 Like
5

Thanks Alex,
I had basically already tried what you suggested except I had set a height for the right div. Comparing it to your solution, I realized that the Prop2 section was not big enough to scroll to the top of the div and fill the div, therefore it did not move or react to the link click. Making sure each Prop Section fills the right div, then it works with div height set to something.
Thanks for your time in helping me figure this out!
Giovanni

Expanded Solution: if link points to another div with a specific height setting (on same page), make sure the target section within the div can fill the div height.