模仿百度百科右侧导航

HTML：

<div id="art_content">
    <div class="box">
        <h2>标题</h2>
        <h3>标题</h3>
    </div>
    <div class="box">
        <h2>标题</h2>
        <h3>标题</h3>
    </div>
    <div class="box">
        <h2>标题</h2>
        <h3>标题</h3>
    </div>
</div>
<div id="Catalog_box"></div>        

ps:art_content是包含页面标题的容器，Catalog_box是包含导航的容器

在初始化方法：

CateNav("#art_content","#Catalog_box");

JavaScript：

function CateNav(elem1, elem2) {
    //添加目录
    var currObj;
    var offsetTop = 0;
    var h2List = new Array(), h3List = new Array();

    var addNav = function () {
        var i1 = 0, i2 = 0, n1 = 0, n2 = 0;
        var temp = '';
        var cateList = $(elem1).html().match(/(<h[2-3][^>]*>.*?<\/h[2-3]>)/ig);
        for (var i = 0; i < cateList.length; i++) {
            if (/(<h2[^>]*>.*?<\/h2>)/ig.test(cateList[i])) {
                n1++;
                n2 = 0;
                temp += '<li><span class="cat_title"><span class="cat_num">' + n1 + '.</span><a href="#' + n1 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></span></li>';
                h2List[i1] = n1;
                i1++;
            }
            else {
                n2++;
                temp += '<dd class="cate-item2"><span>' + n1 + '.' + n2 + '</span><a href="#' + n1 + '_' + n2 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd>';
                h3List[i2] = n1 + '_' + n2;
                i2++;
            }
        }
        $(elem2).append(temp);
    };
    //添加锚点
    var addPoint = function () {
        var i1 = i2 = 0;
        $(elem1).find('h2').each(function () {
            $(this).prepend('<a name="' + h2List[i1] + '"></a>');
            i1++;
        });
        $(elem1).find('h3').each(function () {
            $(this).prepend('<a name="' + h3List[i2] + '"></a>');
            i2++;
        });
    };
    //点击锚点，跳转制定位置
    var clickPoint = function () {
        $(elem2 + ' a').click(function (e) {
            e.preventDefault();
            $(elem2 + ' span').removeClass('active');
            $(this).parent('span').addClass('active');
            currObj = $("[name='" + $(this).attr('href').replace(/#/, '') + "']");
            offsetTop = currObj.offset().top;
            $('html,body').animate({
                scrollTop: offsetTop
            }, 500, 'swing');
        });
    };
    //屏幕滚动，显示并选中锚点
    var scrollWin = function () {
        var windowTop = 0;
        $(window).scroll(function () {
            windowTop = $(window).scrollTop() + 10;
            /*if(windowTop>=$(elem1).offset().top){
                $(".page_right").slideDown(750);
            }else{
                $(".page_right").slideUp(750);
            }*/
            $(elem2 + ' a').each(function () {
                currObj = $("[name='" + $(this).attr('href').replace(/#/, '') + "']");
                offsetTop = currObj.offset().top;
                if (windowTop > offsetTop) {
                    $(elem2 + ' span').removeClass('active');
                    $(this).parent('span').addClass('active');
                    return;
                }
            });
        });
    };
    var init = function () {
        addNav();
        addPoint();
        clickPoint();
        scrollWin();
    };
    init();
}

妥妥哒O(∩_∩)O~