Single page website, want to strip #sections from url (example website given) - html

Question

For a singlepage website, how do some of those websites strip that #section id from the url?
For example: http://www.formationstone.com/
There's no /#about-us; it's just showing the root domain on every subsesuent click from their menu.
I think it may have to do with htaccess, but I can't find the relevant code where I only want my root domain showing on all links.

Answer 1

They are not stripping it, they just use a javascript onclick event to prevent the actual default event of the link and scroll to the headline. If you go to http://www.formationstone.com/#about the hash stays.
Let's have a look at the source code.
This is the link in the menu:
WHO WE ARE
And this is the DOM object it scrolls to
<section id="about"> <h2>Who We Are</h2> ... </section>
And the click listener is on line 128 of http://www.formationstone.com/wp-content/themes/Ignyte/includes/main-scripts.js?ver=4.9.5 line
jQuery('#menu a[href]').on('click', function(event) {
if ($(this).parent().hasClass('telephone')) {}else{
var target = jQuery(this).attr('href');
if( target.length ) {
event.preventDefault();
jQuery('html, body').animate({
scrollTop: jQuery(target).offset().top+75
}, 1000);
}}
});
It takes the href attribute of the clicked link (which is #about) and uses it as a jQuery selector, e.g. $('#about') which is the <section>. And then it scrolls 75px below these section header with a 1 second animation. The thing you are looking for is in line 145: event.preventDefault();. This stops the browser from executing the default event, which would be calling the URL #about.
A side note: There are two ways to make a direct call to http://www.formationstone.com/#about work. With a named anchor:
<section id="about">
<a name="about"></a>
<h2>Who We Are</h2>
</section>
Or with a hash listener (that's what they are using, I just couldn't find it easily). It would be something like:
$(document).ready(function() {
if (window.location.hash) {
var target = jQuery(window.location.hash);
if( target.length ) {
// scroll immediately without animation
jQuery('html, body').animate({
scrollTop: jQuery(target).offset().top+75
});
}
}
});

Answer 2

Everything past the # in a URL is mainly for the browser's benefit, not the server. .htaccess doesn't have much to do with this issue.
I'm not sure what SPA technology you're using, but using Angular as I do, the way I'd avoid having an anchor tag show in the URL is by not using Angular's router -- simply show and hide sections of your SPA by changing the visibility of the various sections directly.
One disadvantage of doing this is that a user can't bookmark a particular section of your app and return there reliably based on the URL they've bookmarked.