Scrolldown

HTML

<a id="home" href="index.html" class="btn btn-default menuButton activeButton">Home</a>
                           
<a id="over" href="#" class="btn btn-default menuButton scroller">Over ons</a>
                            
<a id="klant" href="#" class="btn btn-default menuButton scroller">Klanten</a>
                           
<a id="info" href="#" class="btn btn-default menuButton scroller">Bestellen</a>
                           
<a id="contactUs" href="#" class="btn btn-default menuButton scroller">Contact</a>

CSS

.menuButton
{
    color: #00000;
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 0.5s ease;
    padding: 10px 20px 10px 20px;
}

.menuButton:hover
{
    color: #ffffff;
    background: #003E6A !important;
    border: 1px solid #003E6A;
    transition: 0.5s ease;
}
.activeButton
{
    color: #ffffff;
    background: #003E6A;
    border: 1px solid #003E6A;
    transition: 0.5s ease;
}

JavaScript

$(document).ready(function()
{    
	$('.scroller').on('click',function (e) 
	{
		var headerHeight = 129;
        e.preventDefault();
		
        var target = this.hash,
        $target = $(target);		

        $('html, body').stop().animate(
		{
            'scrollTop': $target.offset().top - headerHeight
        }, 700, 'swing', function () 
		{
            window.location.hash = target - 129; //129 = headerHeight
        });
    });
    $(window).scroll(function()
    {
        var value = $(this).scrollTop();		
        var elements = ['#home', '#over', '#klant', '#info',     '#contactUs'];
        
        if(value < 350) { //home		
            $(elements[0]).addClass("activeButton");
            removeClass(elements[0]);
        }		
        if(value > 349 && value < 1204) { //overOns		
            $(elements[1]).addClass("activeButton");
            removeClass(elements[1]);
        }		
        if(value > 1203 && value < 1500) { //klanten
            $(elements[2]).addClass("activeButton");
            removeClass(elements[2]);
        }		
        if(value > 1500 && value < 1950) { //bestellen
            $(elements[3]).addClass("activeButton");
            removeClass(elements[3]);
        }
        if(value > 1950) { //Contact
            $(elements[4]).addClass("activeButton");
            removeClass(elements[4]);
        }	
        
        function removeClass(exception) {
            var divs = elements;	
            divs.splice($.inArray(exception, divs),1);		
            
            var i;		
            for (i = 0; i < divs.length; ++i) {
                $(divs[i]).removeClass("activeButton");				
            }
        }	
    });
});