I have two pages pulling from the same collection, they’re identical except how the content is organized (one is a ‘detail view’ and one is a ‘grid view’). I’d like to be able to link these two together, so that when you click on a piece of content in the collection on the ‘grid view’ page it takes you directly to that piece on the ‘detail view’ page by scrolling to the right point in the page, and visa-versa.
It seems like Link or Section IDs would be useful here, but that seems to only work for connecting content within a page and not across them.
Anyone know how I might approach this? Thanks!
Site Link:
The page titled ‘Artwork’ is the page in question- if you click on any piece you can see the detail view.
Linking to a section across pages is easy in itself, you just have to use an absolute link which includes the #hash, like this;
https://www.mysite.com/my-page#section-id
You can do this to CMS generated content, but you’ll need to drop an HTML embed inside the collection item to do it easily, e.g.
<a name="nav-SLUG"></a>
That SLUG would be the slug of the CMS item. Then for e.g. a CMS item with a slug of foo, you’d navigate to
https://www.mysite.com/my-page#nav-foo
The nav- prefix is simply to separate these nav ID’s from any ID’s you have on the page, to prevent conflicts.
BUT THERE’S A BIGGER CHALLENGE
Which is the fact that you’ve structured your target page as a horizontal scrolling area.
This isn’t exactly natural to the way HTML navigates pages.
Vincent has a pretty slick solution here, which combines vertical and horizontal scrolling to resolve the issue. You’ll have to dig into it to see how it works;
Thank you so much for your thoughtful reply- what a relief. I took a pass:
• Updated the horizontally scrolling page to the structure used by Vincent
• Added an absolute link in the format “https://portfolio-site-a448c4.webflow.io/art-detail#nav-SLUG” as a new CMS field, which is then pulled through to each card in the ‘grid view’, linking it to the ‘detail view’.
• Added HTML embed to each card, with “<a name="nav-SLUG"></a>”" inside it.
Once I did this I tested it with one piece from the CMS collection, that has the slug “1971-cuda-don-getz”. Pic attached for reference.
When I click on that piece in the grid view the detail view page opens, but it’s not scrolling to the position of that piece. Any guess as to what the issue might be?
