How to navigate to a specific part of a page using a hash URL

0
The feature I want is that when a link named like exURL#1 (e.g., deeplink) is clicked, the page opens and DataView1 (it doesn't matter if the Class name is 1 or the ID tag is 1) scrolls to immediately display DataView1. (The number of DataViews depends on how many Gallery widgets are created.) How can I implement this?
asked
1 answers
0

This is not supported out of the box in Mendix. A URL like #section1 will not automatically scroll to a specific Data View, especially when the content is rendered dynamically (for example inside a Gallery).


The reason is that Mendix does not create stable HTML anchors for these widgets by default. The browser can only scroll to a hash if there is a matching element in the DOM at the time the page is rendered.


The way to implement this is to use a small JavaScript customization. Let the page load, read the hash from the URL, and then scroll to the matching element using scrollIntoView().


First, make sure each Data View (or container inside your Gallery) has a unique identifier. For example, assign a class or id like section-1, section-2, etc., based on your data.


Then add a custom script like this:


document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
        const hash = window.location.hash;
        if (!hash) return;

        const target = document.querySelector(hash);
        if (target) {
            target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
    }, 300);
});


With this approach, a URL like ...#section-1 will scroll to the correct Data View after the page is rendered.


If this resolves your issue, please mark it as accepted.


answered