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>