Link section within page with slash (/) and not hash (#) without reloading the page

Question

So here is a requirement:

1. Client wants a page template where there is two level menu on left side of the page.
2. That menu can link to any page, post, category or a section within same page.
3. The menu which links to a section within same page should be slash linked and not # linked for the purpose of SEO.

And this is how we have implemented it:

1. Based on one requirement I have developed a custom page template with sidebar on left.
2. Using WordPress menu I registered multiple menus with menu items as per the requirement.
3. I developed a custom widget which provides an option to select a menu to be assigned to that page. So far all good....

And here comes the question:

1. How do I link the section within same page with / and not #?
2. For example if the page is http://example.com/event-page/ and there is a section within page content say "Get Passes" and also a menu corresponding to it on left. Now what client wants is that the menu shall not be linked like http://example.com/event-page/#get-passes but rather http://example.com/event-page/get-passes/
3. Needless to say that it should just scroll down to that particular section without reloading the page.

Answer 1

You can use history.pushState to change the browser URL without reloading a page, and jQuery's scrollTop method to scroll to the top of a specific element (and there are VanillaJS equivalents too). This will mimic the functionality of # anchors.

However, like what Mark said, what your client wants is really weird. It is hard to maintain and keep working, and it might even hurt your client. Here's a case study that you might want to show him/her.