點擊錨點滾動跳轉及滾動頁面導航欄自動點亮


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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM