Collection List link shortcut to Collection List further down the page

Design help Custom code
1

Hi!

I have a CMS called “Topics” and another CMS called “SubTopics”. On the “Topics” CMS page, I have a collection list connected via multi-reference to “SubTopics” and so, it shows a list of the different subtopics for that topic.

I now would like to have buttons on the very top of this Topics CMS page that would scroll down to the relevant subtopic item in the collection list. These buttons would also need to be a collection list referencing to the “SubTopics” CMS as the number of sub-topics differs for each topic.

I don’t have experience with custom code so I have no clue about how to get started. My brain tells me that if I could dynamically give an ID to each collection item in the second collection list, then the first collection list at the top of the page could navigate to that ID section accordingly.

Here’s a little mock-up which I think will explain everything much better. The red boxes are my notes.

welp
welp1440×2417 171 KB

Any help would be very appreciated :slight_smile: !

I can’t share my project as it’s ~private for work~

2

In the lower collection list, drop an HTML Embed, with an ID’d div, like

<div id="subtopic-{{ Slug }}"></div>

This gives you dynamic linking locations you can scroll to.

Then at the top of your page you’d also have a collection list to create the buttons.
There are different ways to wire that up, probably the easiest is to create your buttons in the designer, and then add a CMS bound custom attribute.
I’ll use link-subtopic={{ Slug }} as an example here.

Then you need the JS to trigger the navigation.
This would go in the page’s before-/body code area.

Something like-

// Get all the buttons with the attribute "link-subtopic"
let buttons = document.querySelectorAll('[link-subtopic]');

// Add a "click" event listener to each button
buttons.forEach(button => {
    button.addEventListener('click', function() {
        // Get the value of the "link-subtopic" attribute
        let subtopic = this.getAttribute('link-subtopic');

        // Navigate to the section with id equals to subtopic
        location.hash = subtopic;
    });
});
3

Thank you so much!

Your help was super clear and it worked perfectly :slight_smile:

1 Like