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

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.

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.