jQuery Scroll Menu


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);
}