How Do I Jump to Sections in Ignition Perspective?

After the Link component’s url property points to the current Perspective page plus a valid DOM fragment, one click moves the scrollable page directly to the marked component. Use separate anchors for top, middle, and bottom positions; this method targets elements, not numeric scroll percentages.

Where does the navigation request travel?

Follow the packet. The operator clicks a Link in the browser, the Link resolves an address for the active gateway, project, and configured page, and the fragment identifies a rendered element inside that page. The required address pattern is:

{session.props.gateway.address} + "/data/perspective/client/<project_name><configured_url_of_page>" + "#<domId_to_target>"

The browser interprets the portion after # as a fragment identifier. It searches the current document for the corresponding DOM ID and scrolls that element into view. Before troubleshooting the fragment, confirm that the browser can open the configured Perspective page normally and that the project and page portions of the address are correct.

How do I create the destination anchors?

Layer one first: the destination component must exist in the rendered layout. Select the component or container that marks the desired landing area, open its meta property category, add a value property named domId, and assign a unique descriptive value.

1. Select the component or container at the intended landing point.
2. In meta, add a value property with the key domId.
3. Enter a unique value such as page-top, page-middle, or page-bottom.
4. Repeat for every landing point needed on the page.

The fragment text and domId value must match exactly. Duplicate values make the destination ambiguous, while a missing or misspelled value leaves the browser with no element to locate.

These labels describe logical positions. The method does not calculate 0%, 50%, or 100% of scroll range. Confirm each target is visible in the rendered view and has a distinct domId before configuring any Link.

How do I build the correct Perspective page address?

Assemble the route from known configuration values rather than typing the browser address from memory. Replace the placeholders with the project name, the URL configured for the page, and the target’s domId. Keep the leading slash on the configured page URL.

{session.props.gateway.address} + "/data/perspective/client/<project_name><configured_url_of_page>" + "#page-bottom"

For example, the top and bottom Links use the same gateway, project, and page route. Only the final fragment changes:

... + "#page-top"
... + "#page-bottom"

The route portion gets the browser to the correct Perspective page; the fragment performs the in-page jump. If the route is incomplete, the browser may navigate away, reload the session, or fail to reach the intended page. If the route is correct but the fragment does not match a rendered ID, the page can load without moving.

Test the address itself before attaching it to multiple controls: evaluate or copy the completed value and compare its project and page portions with the present page address. The proof at this stage is a complete address ending in the exact fragment assigned to the target.

Which Link property receives the binding?

Bind the assembled expression to the Link component’s url property. Do not place the page address in the Link’s target property. The url is the navigation destination; target is not the destination-address field.

1. Place a Link component where the operator will initiate the jump.
2. Create an Expression binding on the Link’s url property.
3. Enter the gateway, client route, project, configured page URL, and fragment expression.
4. Evaluate the binding and inspect the resulting string.
5. Repeat for each destination, changing only the final #domId value when all Links remain on the same page.

Click the Link once. A correct property binding keeps the user on the intended page and moves the marked component into view.

How do I commission top, middle, and bottom jumps?

Commission one destination at a time. Start with the top anchor because its location is easy to recognize, then add the bottom anchor, followed by any midpoint anchors.

1. Scroll to the bottom manually and click the Link whose URL ends in #page-top. Confirm the first marked component moves into view.
2. From the top, click the Link ending in #page-bottom. Confirm the last marked component moves into view.
3. Click the Link ending in #page-middle. Confirm the selected midpoint component, rather than a calculated 50% scrollbar position, moves into view.
4. Resize the browser or change the content height and repeat the checks. Element anchors remain tied to components even when the numerical scroll percentage changes.

If a jump lands too high or too low for the intended operator workflow, move the domId to a more suitable component or container. The anchor’s placement determines the landing reference. The check passes when every control reaches its named content area without leaving or reloading the page.

How do I isolate a failed jump?

Trace the path in order and stop at the first mismatch. A Link that does nothing usually has no matching rendered domId. A Link that opens or reloads the page without scrolling usually has a route, property, or fragment problem.

For the final end-to-end test, begin on each extreme of the page, activate every Link, and confirm the browser reaches the component whose meta.domId matches the URL fragment without opening another page or reloading the session.

FAQ