点击锚点滚动跳转及滚动页面导航栏自动点亮

---------------html--------------------

<div class="left_nav">
        <ul>
            <li class="nav_1" mapId="bmsj-m">
                <span></span>
                <a href="javascript:void(0);">报名条件</a>
            </li>
            <li class="nav_1" mapId="ksbd">
                <span></span>
                <a href="javascript:void(0);">政策改革</a>
            </li>
            <li class="nav_1" mapId="zkys-m">
                <span></span>
                <a href="javascript:void(0);">注会优势</a>
            </li>
            <li class="nav_1" mapId="kskm">
                <span></span>
                <a href="javascript:void(0);">科目教材</a>
            </li>
            <li class="nav_1" mapId="banxing">
                <span></span>
                <a href="javascript:void(0);">网课培训</a>
            </li>
            <li class="nav_1" mapId="wkst-m">
                <span></span>
                <a href="javascript:void(0);">网课试听</a>
            </li>
            <li class="nav_1" mapId="xxgj-m">
                <span></span>
                <a href="javascript:void(0);">学习工具</a>
            </li>
            <li class="nav_1" mapId="xxgh-m">
                <span></span>
                <a href="javascript:void(0);">学习规划</a>
            </li>
            <li class="nav_1" mapId="divclass">
                <span></span>
                <a href="javascript:void(0);">更多课程</a>
            </li>
            <li class="nav_bot">
                <a href="javascript:void(0);" data-leyu></a>
            </li>
            <li class="nav_bot nav03" onClick="javascript:ZY.util.returnTop();">
        
            </li>
        </ul>
    </div>

  -----------js-----------

function gundong1(){
    var flag = false;
      $('.left_nav ul li.nav_1').on('click',function(){
        flag=true;
        $(this).addClass('active').siblings('.nav_1').removeClass('active');        
        var attr = $(this).attr('mapId');
        $('html,body').stop().animate({ scrollTop: $('#'+attr).offset().top}, 300);
        setTimeout(function () {
          flag = false;
        }, 500);
      });
       $(window).scroll(function(){         
         if (flag==false){           
          var left_index=$('.left_index');
          var nav_1=$('.nav_1');        
          for(var i=0;i<9;i++){
            if($(document).scrollTop()>left_index.eq(i).offset().top-100){
               nav_1.eq(i).addClass('active').siblings('.nav_1').removeClass('active');
            };
          };
         }
       });

  }
  gundong1();

  

猜你喜欢

转载自www.cnblogs.com/czh-520/p/9087013.html
今日推荐