History replaceState

HTML

<span id="hash-change"></span>

<span id="current-hash"></span>

<div>
	<a href="#hash-trigger">Regular trigger hash change</a>
</div>

<div>
	<button data-hash="hash-1">Anchor 1</button>
	<button data-hash="hash-2">Anchor 2</button>
	<button data-hash="hash-3">Anchor 3</button>
</div>

CSS

#hash-change {
	color: #CC0000;
}

#current-hash {
	color: #008800;
}

span {
	display: block;
	margin-top: 10px;
}
div {
	margin-top: 10px;
}

JavaScript

changeHash = function(anchor) {
	history.replaceState(null, null, document.location.pathname + '#' + anchor);
	
	$('#current-hash').text(document.location.hash);
};

$(window).on('hashchange', function() {
	$('#hash-change').text('Hash change event triggered on '+ new Date().toString());
	
	$('#current-hash').text(document.location.hash);
});

$('button[data-hash]').on('click', function(e) {
	changeHash($(e.delegateTarget).attr('data-hash'));
});