How do I link to specific section on another page?

Questions
1

Hi, I tried adding an ID to the section I need and “pagelink#id” for the link but it didn’t work, is there another way to do it?

2

Hi!

Use this to link to anchor links:

image
image274×556 11.4 KB

Select link, settings, link, click on the red marked icon.
image

Type in ID, now it should be done :slight_smile:

3

Hey man, the issue is that I need on another page, for the same page it works perfectly.

4

Ah, I see!

You want to link to an ID on another page. I haven’t had the need of that, so I don’t know how to do that. I’m not a member of the team, just trying to help fellow devs/designers out :slight_smile:

1 Like
5

Thank you anyway! If I figure it out I’ll add here too

6

Yeah, that would be awesome. I’m looking for answers here all the time :laughing:

@dejan @Pakic

Do any of you guys know how to help @rafaellaera ?

2 Likes
7

Use the URL instead

For homepage like: “/#id-name”

For other pages: /page-name#id-name

2 Likes
8

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 startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const ease = easeInOutCubic(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, ease);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function easeInOutCubic(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t * t + b;
        t -= 2;
        return c / 2 * (t * t * t + 2) + b;
    }

    requestAnimationFrame(animation);
}

window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (hash) {
        var element = document.querySelector(hash);
        if (element) {
            smoothScrollTo(element);
        }
    }
});
</script>

This code will capture the hashtag in the URL and run the code if hashtag is available, and do a smooth ease-in/ease-out scroll to the section, linked from another page :ok_hand:t3:

If you want to “snap” directly to your section, use this code instead (no smooth scrolling):

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

These codes are not tied to the specific hashtag so it will work for all your hashtag links no matter the value.

Let me know if it works :+1:t3:

4 Likes