Link - Navigate to section/ID in another page

[tspolites]

I’m trying to use a link to navigate to a particular section/ID in another page.

Am I able to do this?

[Darko]

Yes that is possible and you can do it like this:

1. Add ID to the wishing section
2. Open your link block settings and paste the URL of a page where your section is located and at the end of that link just add this: ‘#section-ID’

Like this:

[tspolites]

Hi Darko,

I have done tried this and unfortunately it will only navigate to the top of the page where the section exists. The url is displaying how you suggested linking the sections, ie: “url#section-ID”.

For further context of the components. I have a navbar with link buttons that navigate to their respective pages.

There are popup components that also have link buttons that navigate to the page and its respective section.

[tspolites]

Adding in screenshot of popup component in builder

[Darko]

Are you using loop option to multiply your link tags ?

[tspolites]

Yes I am, I will try without looping and see if that will solve the issue

[tspolites]

After changing this to individual link tags it still will not navigate to the specific section of the page.

If I click on the link when I am already on the page it will take me to the section, but after it will then reload the page and take me back to the top of the page.

Are there any naming/typing conventions that I should use/avoid?

[Darko]

This seems strange, can you please give me the link to your website so i can take a look

[tspolites]

https://vivid-active.divhunt.art/

[tspolites]

Hi Darko,

We’ve now launched the site with our own domain and are still experiencing the same issue:

Please look using the new domain: Vivid Active | Faqs

[tspolites]

Hi Darko,

Has there been any progress on figuring out this issue?

[MixxMaster]

I had some issues with this too and I got it working when removing all special characters. I don’t know if this is the issue but it’s worth trying

Try:
Change: #arrange-a-funeral
To: #arrangeafuneral

Check this topic where I added a generic script to smooth scroll to section if you want:

How do I link to specific section on another page?

I struggled a bit too with this and apparently, this isn’t allowed in Divhunt (yet) so you need to add some JS that loads AFTER the page is done loading and then perform the “scroll to section” Say you want to link from page 1 to #id on page 2: Create link on page1 and create ID on div on page 2 as usual and add this JS code to the “Body End” in “Custom Code”: <script> function smoothScrollTo(element, duration = 1200) { const targetPosition = element.getBoundingClientRect().top; const…

Let me know if it works

[tspolites]

@How do I link to specific section on another page?

window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (hash) {
        var element = document.querySelector(hash);
        if (element) {
            element.scrollIntoView();
        }
    }
});

Hey MixxMaster,

Thank you SOOOO much, this worked perfectly!

I think in a previous update our page was bugged and we weren’t able to save the ID as an attribute (the attribute symbol to not display after inputting it in the settings).

But both worked perfectly, cant thank you enough!

[MixxMaster]

Glad to help

Great looking site too

[stk]

Can i know which body end please?

[Darko]

Hey, you dont need to add this code into body-end to work, you can just make one JS file and paste this code into it like I did here:

Open files tab:

Crete JS file:

Name it (it doesn’t matter how):

Open the file you created and paste the code in there:

You can also remove this lines here and be sure that ‘Event’ dropdown is set to ‘On Ready’:

So at the end your code shall look like this:

[stk]

i have this tab section. and there are 5 separate links in another page for this 5 tabs. when i use ur code it navigate to this section but not open the correct tab. i have given separate id s for each tab. and i am using Tabs plugin for this tab section. what should i do any suggestions please ?

[Darko]

Unfortunately, you cannot do this functionality through Divhunt natively, to achieve this you would need to include custom code. You can try to find a solution by using ChatGPT or some forums like stack overflow.

[stk]

okay . thank you so much