jquery页面滚动显示第几步效果jquery页面滚动显示第几步效果是一款基于jQuery实现的仿百度经验页面滚动显示第几步效果代码。jQuery页面滚动滚动条步骤效果

<script type="text/javascript">
    $(function () {


        $("#ico-group").css("left", ((window.screen.width - 1033) / 2) +42 + "px");
        $("#step div.circle").each(function (index, element) {
            $(element).waypoint(function (direction) {
                if (direction == "up") {
                    //if (index == 0) {
                    //    $($("#ico-group div").get(index)).css("visibility", "hidden");
                    //}
                    
                    for (var i = 0; i < $("#ico-group div").length; i++) {
                        if (i >= index) {
                            $($("#ico-group div").get(i)).css("visibility", "hidden");
                        }
                        if (i > 0 && i==index) {
                            $($("#ico-group div").get(i-1)).removeClass("gray");
                        }
                    }
                    $(element).css("visibility", "visible");
                } else {
                    $(element).css("visibility", "hidden");
                    for (var i = 0; i < $("#ico-group div").length; i++) {
                        if (i < index) {
                            $($("#ico-group div").get(i)).addClass("gray");
                        } else if (i == index) {
                            $($("#ico-group div").get(i)).css("visibility", "visible");
                            $($("#ico-group div").get(i)).removeClass("gray");


                        } else {
                            $($("#ico-group div").get(i)).css("visibility", "hidden");
                        }
                    }
                }


                $($("#ico-group div").get(index)).unbind("click").bind("click", function() {
                    var _targetTop = $(element).offset().top;//获取位置
                    jQuery("html,body").animate({ scrollTop: _targetTop }, 300);//跳转
                });


            }, {
                offset: 0 +index*32
            });
        });
    });
</script>