JS小提琴上的工作解决方案 b $ b HTML

 < section id =1> 
 1 
< / section> 
< section id =2> 
 2 
< / section> 
< section id =3> 
 3 
< / section> 
< section id =4> 
 4 
< / section> 
< div id =menu> 
< a href =＃1> 1< / a> 
< a href =＃2> 2< / a> 
< a href =＃3> 3< / a> 
< a href =＃4> 4< / a> 
< / div> 
 

jQuery

  var timerid; //用于在滚动完成后引发一次滚动功能。 
 $（document）.ready（function（）{
 $（＃menu a）。click（function（e）{
 e.preventDefault（）; 
 $ （#menu a）。removeClass（'active'）; 
 var id = $（this）.attr（href）。substring（1）; 
 $（body）。 animate（{$ b $'scrollTop'：$（section＃+ id）.offset（）。top 
}）; 
}）; 
 $（body） .scrollTop（1）; //强制窗口滚动在页面加载时执行
 $（window）.scroll（function（）{
 clearTimeout（timerid）; 
 timerid = setTimeout（checkactivelink， 50）; 
}）; 

函数checkactivelink（）
 {
 $（section）。each（function（）{
 if（ $（body）。scrollTop（）> = $（this）.offset（）。top）
 {
 $（＃menu a）。removeClass（'active'）; 
 $（＃menu a [href =＃+ $（this）.attr（id）+]）。addClass（'active'）; 
} 
}） ; 
} 
}）; 
 

I have a one page website that I would like the menu item to highlight on page scroll. I have the following JQuery but I do not know where to go from here.

<script>
    $(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) {
                    $('html,body').animate({
                        scrollTop: target.offset().top - 177
                    }, 1000);

                    return false;
                }
            }
        });
    });
</script>

And the menu is setup up like this. I'm not sure if it matters but i'm using a nav walker in Wordpress. I'm hoping someone can point me in the right direction.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-1-collapse">
            <div class="menu-txt">Menu</div>
        </button>

        <div class="phone-h hidden-md hidden-lg">
            <span><img src="http://gr8students.wpengine.com/wp-content/themes/devdmbootstrap3/img/phone-h.png"></span>
        </div>
    </div>

    <div class="collapse navbar-collapse navbar-1-collapse">
        <ul id="menu-main-menu" class="nav navbar-nav">
            <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a title="How To Help" href="#howtohelp">How To Help</a></li>
            <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a title="Perks &amp; Programs" href="#perksprograms">Perks &amp; Programs</a></li>
            <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a title="Where To Give" href="#wheregive">Where To Give</a></li>
            <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a title="The Process" href="#bloodgo">The Process</a></li>
            <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a title="Contact" href="#contact">Contact</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a title="Stay In The Loop" href="#">Stay In The Loop</a></li>
            <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a title="Check Your Stats" href="#">Check Your Stats</a></li>
        </ul>
    </div>
</nav>

Working solution on JS Fiddle

HTML

<section id="1">
    1
</section>
<section id="2">
    2
</section>
<section id="3">
    3
</section>
<section id="4">
    4
</section>
<div id="menu">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
</div>

jQuery

var timerid; //Used to fire scroll function once after scrolling is done.
$(document).ready(function(){
    $("#menu a").click(function(e){
        e.preventDefault();
        $("#menu a").removeClass('active');
        var id = $(this).attr("href").substring(1);
        $("body").animate({
            'scrollTop': $("section#" + id).offset().top
        });        
    });
    $("body").scrollTop(1); //forcing window scroll to execute on page load
    $(window).scroll(function(){
        clearTimeout(timerid);
        timerid = setTimeout(checkactivelink, 50);
    });

    function checkactivelink()
    {
        $("section").each(function(){
            if($("body").scrollTop() >= $(this).offset().top)
            {
                $("#menu a").removeClass('active');
                    $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
            }
        });
    }
});