4

So I have a one-page website with multiple sections and IDs. Right now, in the nav, I have it going to #about to jump them down to a section with ID=about

But I want the user to be able to go to mysite.com/#about but without the #. So if the user goes to mysite.com/about, it will jump them down to the about section on the same domain.

How can I accomplish this? I imagine it's a dot htaccess modification with some javascript?

I've Googled all over for a solution but to no avail.

5
  • 2
    I would discourage that, the # is understood as navigating to a section of the page, a example.com/about is understood as being a different page. Everybody who does not understand what you are trying to do, (which would be everybody you have not told), would think your site was broken and the about page didn't actually exist because the browser is navigating, (you would need to create the code), to the about section of the main page. Those who would not understand would include screen readers and search engines.
    – Wayne
    Nov 27, 2022 at 23:55
  • You would need to use the NE flag to (no escape) the special character ... rageagainstshell.com/2018/10/… ... but again others would see your site as broken.
    – Wayne
    Nov 28, 2022 at 0:18
  • rageagainstshell.com/2018/10/…
    – Wayne
    Nov 28, 2022 at 0:34
  • 2
    You would only need the NE flag if you are issuing an external redirect to the #fragid. You could instead treat the one-page website as a front-controller (rewriting the request) and let JS read the URL and do the necessary, as mentioned in my answer. @Wayne
    – MrWhite
    Nov 28, 2022 at 1:47
  • @MrWhite yes I didn't consider that when I commented - I tunnel visioned to the special character
    – Wayne
    Nov 28, 2022 at 4:40

1 Answer 1

4

Assuming the file that renders your "one-page" site is index.html and your "pages" are /about, /contact and /help that correspond to elements with ids of the same name (less the slash prefix).

Your root .htaccess code would be something like the following, using mod_rewrite:

RewriteEngine On

RewriteRule ^(about|contact|help)$ index.html [L]

The above rewrites requests for the 3 URLs stated to index.html. So, those 3 URLs get the same HTTP response.

Then, JavaScript on the page would be something like:

// Get the URL-path, less the slash prefix
const id = location.pathname.substring(1);

// Get the HTML "page" element whose ID is passed in the URL.
const element = document.getElementById(id);
if (element) {
    element.scrollIntoView();
}

Note that the id could be empty or index.html. (Aside: You could redirect from /index.html to / in .htaccess.)

Although, as mentioned in comments, this might have accessibility issues over using the standard fragment identifier. And /#about and /about will return the same response - the first being handled by the browser and the second by JavaScript.

Reference:

1
  • 1
    You'd also have issues with duplicated content on those pages, seeing as you're serving the same content on each URL just jumping to different sections. A cannonical would help, but would probably result in search engines only indexing the homepage. Dec 3, 2022 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.