Update location hash when user scrolls to section
Just as another idea, updating the hash by taking the scroll value is more robust. Can be done in jQuery using scrollTop().
$(window).scroll(
function(){
if($(this).scrollTop() > 100 && $(this).scrollTop() < 200){
window.location.hash = "your_hash_name";
}else{
window.location.hash = "";
}
}
);
This updates the location.hash value once you scroll between (100, 200) pixels.
Look at my proposition. jQuery code will catch all <section> selectors after document loaded and set appropriate hash from data-hash attribute while you scroll.
$(document).ready(function(){
var sections = {};
$(".section").each(function(){
var hash = $(this).data("hash"),
topOffset = $(this).offset().top;
sections[topOffset] = hash;
});
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
setHash(scrollTop);
});
function setHash(st){
var hash = "";
for(section in sections){
if (section < st + ($(window).height()/2)) hash = sections[section];
}
console.log(`SETTING HASH: ${hash}`);
window.location.hash = hash;
}
});section{
position: relative;
display: block;
width: 100%;
height: 800px;
background: #fff;
border-bottom: 1px solid #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section" data-hash="about">
#about
</section>
<section class="section" data-hash="works">
#works
</section>
<section class="section" data-hash="contact">
#contact
</section>