这是一款利用jQuery制作的标题导航自动跟随内容，锚点滚动定位特效代码，制作新闻类网站特别适合。

使用方法

在页面引入以下JS文件

<script>
$(function () {
    var nav = $("#nav");
    var mainPage = $(".mainPage");
    var mainTopArr = new Array();
    for(var i=0;i<mainPage.length;i++){
        var top = mainPage.eq(i).offset().top;
        mainTopArr.push(top);
    }
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var k;
        for(var i=0;i<mainTopArr.length;i++){
            if(scrollTop>=mainTopArr[i]){
                k=i;
            }
        }
nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
    });
    nav.find("a[href^='#']").click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
    });
});
</script>

Html结构

在页面引入以下CSS.css样式文件

<div id="nav">
    <a href="#page1" class="active">新闻</a>
    <a href="#page2">资讯</a>
    <a href="#page3">团队</a>
    <a href="#page4">网站</a>
    <a href="#page5">特效</a>
    <a href="#page6">文件</a>
    <a href="#page7">模板</a>
    <a href="#page8">交流</a>
    <a href="#page9">图片</a>
    <a href="#page10">百家号</a>
</div>
<div id="main">
    <div class="mainPage" id="page1">新闻</div>
    <div class="mainPage" id="page2">资讯</div>
    <div class="mainPage" id="page3">团队</div>
    <div class="mainPage" id="page4">网站</div>
    <div class="mainPage" id="page5">特效</div>
    <div class="mainPage" id="page6">文件</div>
    <div class="mainPage" id="page7">模板</div>
    <div class="mainPage" id="page8">交流</div>
    <div class="mainPage" id="page9">图片</div>
    <div class="mainPage" id="page10">百家号</div>
</div>