Menu html
<ul class="scrolling-menu">
<li class="active"><a href="#home"><span>Home</span></a></li>
<li><a href="#about"><span> About</span></a></li>
<li><a href="#portfolio"><span> Porfolio</span></a></li>
<li><a href="#contact"><span>Contact</span></a></li>
</ul>
Content html
<section id="home">
Home content
</section>
<section id="about">
About content
</section>
<section id="portfolio">
Portfolio content
</section>
<section id="contact">
Contact form
</section>
if(window.location.hash.length>0){
var href = window.location.hash;
console.log(href);
var before_active = jQuery('.scrolling-menu li.active a').attr('href');
var before_active_top = jQuery(before_active).offset().top;
var scroll_top = jQuery(href).offset().top;
var diff = Math.abs(scroll_top - before_active_top);
var set_time = diff/2;
if(set_time<500){
set_time = 500;
}
customScrollTo(scroll_top, set_time);
}
jQuery('.scrolling-menu li a').click(function(ev){
var href = jQuery(this).attr('href');
if(href.indexOf('#')!=-1){
ev.preventDefault();
var before_active = jQuery('.scrolling-menu li.active a').attr('href');
var before_active_top = jQuery(before_active).offset().top;
var scroll_top = jQuery(href).offset().top;
var diff = Math.abs(scroll_top - before_active_top);
var set_time = diff/2;
if(set_time<500){
set_time = 500;
}
customScrollTo(scroll_top, set_time);
jQuery('.scrolling-menu li').removeClass('active');
jQuery(this).parent().addClass('active');
}
});
function customScrollTo(topValue, time){
jQuery("html, body").animate({
scrollTop: topValue
}, time);
}