右侧导航栏(动态添加数据到list)

页面样式

<style>

            .scroll {

                position: fixed;

                right: 5%;

                top: 5em;

                background: #ccc;

                display: none;

            }

            .scroll ul {

                list-style: none;

                margin: 0;

                padding: 0;

                list-style: none;

                border: 0;

            }

            a {

                outline: none;

                text-decoration: none;

                tap-highlight-color: rgba(0, 0, 0, 0);

                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

                -moz-tap-highlight-color: rgba(0, 0, 0, 0);

                -ms-tap-highlight-color: rgba(0, 0, 0, 0);

                -o-tap-highlight-color: rgba(0, 0, 0, 0);

                color: #3c3c3c;

            }

        </style>

页面

右侧的导航栏的list

<div class="scroll">

      <ul id="list">

      </ul>

</div>

js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

    $(function() {

        $(window).scroll(function() {

            if(document.body.scrollTop > 500) {//当滚动条滑倒500px是出现列表

                $(".scroll").css("display", "block")

            }

        })

        var IdList=[];//定义一个空的数组

        var a = $("body h2")//取到整个body里的h2

        for (var j = 1;j < a.length;j++ ) {//循环出来

            IdList.push(a.eq(j).attr('id'))    //将取到id值push到空数组里

        }

        var result = "";

        for(var i = 0; i < IdList.length; i++) {//循环添加到li标签里

            console.log(IdList[i])//控制台打印出来自己检查

            result += "<li><a href='#" + IdList[i] + "'>" + IdList[i] + "</a></li>"

        }

        $("#list").append(result)//将li插入ul里面

    })

</script>