In Mendix, you can implement anchor links to enable users to jump to different sections of the same page by using a combination of class names, buttons, nanoflows, and JavaScript actions. The idea is to assign a specific class name to the section you want to scroll to, such as aboutus for the "About Us" section. You then create a button that, when clicked, triggers a nanoflow. Within this nanoflow, you call a JavaScript action that contains the logic for scrolling to the target section. The JavaScript action works by finding the element with the specified class name and then using the scrollIntoView function to smoothly scroll to that element on the page. This method allows for a clean and efficient way to navigate within a single page in Mendix, enhancing the user experience with smooth transitions.

JS action code

import "mx-global";
import { Big } from "big.js";

/**
 * @returns {Promise.<void>}
 */
export async function scroll() {
	// BEGIN USER CODE
	// Get the target element by its class name
	const targetClassName = 'aboutus';  // Replace with your actual target class name
	const targetElements = document.getElementsByClassName(targetClassName);

	if (targetElements.length > 0) {
		// Get the first element with the specified class name
		const targetElement = targetElements[0];
		// Scroll to the target element smoothly
		targetElement.scrollIntoView({
			behavior: 'smooth'
		});
	} else {
		console.warn(`Element with class name '${targetClassName}' not found.`);
	}
	// END USER CODE
}

But im not sure on how to do this in the default mendix navigation or menu bar. It would be really helpful if someone can provide the solution for that ! (Scroll navigation in the same page section in default mendix menu bar)

Hm, reading Niveditha's answer, that works. But the lowcode approach is to add the anchors to your page by inserting them using the html-elements widget. That is enough.

Just add this html-element to your page, and pass it with property id='aboutus' like this:

and you have your anchor. You can refer to this anchor from elsewhere on the page, like this:

One catch: if you are on a specific page, you need to set some value in the page's property 'url' and set the property of the anchor to "/p/yourpagesurl#aboutus".