jq实现锚点，导航栏锁定，回到顶部及滚动监听动画效果

一.html

		      <nav class="nav">
		    <a class="active" href="#sec1">免联考MBA</a> 
		    <a href="#sec2">1+1项目</a>  
		    <a href="#sec3">申请流程</a>  
		    <a href="#sec4">学员大数据</a>  
		    <a href="#sec5">报名常见问题</a>   
		  </nav>
		
		  <h2 id="sec1">免联考MBA硕士</h2>
		  <div class="sec1">内容</div>
		  <h2 id="sec2">1+1项目</h2>
		  <div class="sec2">内容</div>
		  <h2 id="sec3">申请流程</h2>
		  <div class="sec3">内容</div>
		  <h2 id="sec4">学员大数据</h2>
		  <div class="sec4">内容</div>
		  <h2 id="sec5">报名常见问题</h2>
		  <div class="sec5">内容</div>
		
		  <button>回到顶部</button>

二.css

	    *{
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	    text-decoration: none;
	  }
	  body{
	    height: 6000px;
	  }
	  .clearfix{
	    content: "";
	    clear: both;
	    display: block;
	  }
	  header{
	    width: 100%;
	    height: 250px;
	    background: url(./apply-banner.jpg) no-repeat;
	    background-size:  cover;
	  }
	  .nav{
	    background: white;
	    width: 1000px;
	    margin: 0 auto;
	    border-bottom: 4px solid #1C3C34;
	    font-size: 0;
	  }
	  .nav a{
	    display:inline-block;
	    font-size: 20px;
	    color: #1C3C34;
	    line-height: 28px;
	    padding: 11px 0px;
	    text-align: center;
	    box-sizing: border-box;
	    width: 20%;
	    cursor: pointer;
	  }
	  .nav .active{
	    background: #1C3C34;
	    color: white;
	  }
	
	  h2,div{
	    width: 1000px;
	    margin: 0 auto;
	    line-height: 300px;
	    text-align: center;
	  }
	  div{
	    line-height: 800px;
	    font-size: 50px;
	  }
	  .sec1{
	    background: aquamarine;
	  }
	  .sec2{
	    background: yellowgreen;
	  }
	  .sec3{
	    background: blueviolet;
	  }
	  .sec4{
	    background: cadetblue;
	  }
	  .sec5{
	    background: darkmagenta;
	  }
	  .nav.active{
	    position: fixed;
	    top: 0;
	    /* left: 259.5px; */
	  }
	  button{
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	  }

三.jq

      // 锚点
  $("a").click(function(){
    $(this).addClass("active").siblings().removeClass("active")
  })
  // 滚动条事件
  var navH=$(".nav").offset().top;// 导航与顶部的高度
  var sec1H=$("#sec1").offset().top;// sec1与顶部的高度
  var sec2H=$("#sec2").offset().top;// sec2与顶部的高度
  var sec3H=$("#sec3").offset().top;// sec3与顶部的高度
  var sec4H=$("#sec4").offset().top;// sec4与顶部的高度
  var sec5H=$("#sec5").offset().top;// sec5与顶部的高度

  $(window).scroll(function(){

    // 固定导航
    if($(document).scrollTop()>navH){
      
      $(".nav").addClass("active")
      
      var lefts=($(window).width()-$(".nav").width())/2
      // console.log(lefts);
     
      $(".nav.active").css(
       "left",lefts+"px",
      )

    }else{
      $(".nav").removeClass("active")
    }
    // 滚动高亮

    if($(document).scrollTop()>=sec1H&&$(document).scrollTop()<sec2H){
      $("a").eq(0).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec2H&&$(document).scrollTop()<sec3H){
      $("a").eq(1).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec3H&&$(document).scrollTop()<sec4H){
      $("a").eq(2).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec4H&&$(document).scrollTop()<sec5H){
      $("a").eq(3).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec5H){
      $("a").eq(4).addClass("active").siblings().removeClass("active")
    }

  })
// 回到顶部
  $("button").click(function(){
    $("html").animate({
        "scrollTop":"0"
      },1000);
  })