Есть ли лучший способ достичь таких же результатов? Одностраничные сайты

Я пытаюсь создать веб-сайт только с одной страницей, но в нем есть разные разделы, вы можете перемещаться по меню и прокручивать его до выбранного раздела.

Вот предварительный просмотр веб-сайта, который я создал, используя технику, которую вы увидите ниже: http://spacehopperdesign.co.uk

Пожалуйста, просмотрите этот скрипт для HTML и JavaScript, который я использую, игнорируйте CSS, поскольку он ничего не делает: http://jsfiddle.net/J2kjA

Моя проблема: я хочу, чтобы кнопки получали класс. Active, когда отображается их раздел, я знаю, что мне удалось заставить его работать, как вы заметили в режиме предварительного просмотра. Но, как вы увидите в Fiddle, JS, который я использую, немного сложна, и я действительно запутаюсь, особенно когда работаю над большим проектом со многими разделами с ним.

В любом случае, чтобы добиться тех же результатов, используя гораздо более простой способ? Я предпочитаю не использовать плагины, пожалуйста. Любая помощь или совет будут высоко оценены.

Вот и JS:

$(document).ready(function() {

    //Prevent clicking on .active links
    'use strict'; $('.active').click(function(a) {
        a.preventDefault();
    });

    //Menu Scrolling To Sections//
    $(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

        if (target.length) { 
            var topPadding = 50; 
        if($(window).width() > 1030) 
            topPadding = 80; 
        $('html,body').animate({ 
            scrollTop: target.offset().top - topPadding }, 700);
        return false;
        }}});
    });


    $(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 

    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 

        $('#mainMenu li a').removeClass('active'); 

        if(scrollHeight >= index && scrollHeight < sectionA) 
        $('#index').addClass('active'); 

        if(scrollHeight >= sectionA && scrollHeight < sectionB) 
        $('#sectionA').addClass('active'); 

        if(scrollHeight >= sectionB && scrollHeight < contact) 
        $('#sectionB').addClass('active'); 

        if(scrollHeight >= sectionC) 
        $('#sectionC').addClass('active'); 
    });


}); 

и HTML:

        <header id="headerWrapper">
            <div id="headerContent">
                <nav>
                    <ul id="mainMenu"><!--Main Menu-->
                        <li><a class="active" href="#Index" id="index">Welcome</a></li>
                        <li><a href="#SectionA" id="sectionA">SectionA</a></li>
                        <li><a href="#SectionB" id="sectionB">SectionB</a></li>
                        <li><a href="#SectionC" id="sectionC">Contact</a></li>
                    </ul>
                </nav>

            </div>
        </header>

        <div id="page"><!--Main Container-->

            <div id="Index" class="wrapper">
                <div class="content">

                </div>
            </div>  

            <div id="SectionA" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionB" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionC" class="wrapper">
                <div class="content">

                </div>
            </div>        
</div>