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

by

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.

1 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.

Leave a Comment