锚的效果的实现

来源:互联网 发布:党员队伍结构持续优化 编辑:程序博客网 时间:2024/05/21 13:55

http://gouwu.sogou.com/baokuan 大家可以瞅瞅这个网址里面的效果


这个锚的效果 当然了啦 京东什么的也很多 在这就不说css的效果了直接上js



var totop_index1=function(){
var TOPID="#float_nav";
var lilength=$(TOPID+" ul li").length;
var locationlen=$(".low_pro_area").length;//因为网页上每个块都是class 就这获取就好了
var location =new Array();//用来存储每一个锚需要定位到的网页的位置
    for(var i=0;i<locationlen;i++){
     location[i]=$(".low_pro_area:eq("+i+")").offset().top;//找出需要定位的位置offset不晓得的可以谷歌啊
}
$(TOPID+" ul li").each(function(){//调用jquery的each方法
$(this).click(function(){
var arg=$(this).attr("id");
var num=arg.split("_")[1];//也算是命名的一点小技巧啦,这样就能定位点击的是哪一个锚了
if(num!=9){
$('body,html').animate({ scrollTop: location[num] }, 800);//点击就可以返回指定的位置
}else{
$('body,html').animate({ scrollTop: 0 }, 800);//点击下方的返回顶部 
}
});
});



0 0
原创粉丝点击