js实现目录定位文本示例

1:先检查截图效果1) 。

2)点击左侧导航栏里的目录会对应到对应的层二：下载引进jquery-1.7.2.min.js文件三：页面代码：复制代码代码如下： pre name='code' class='html '！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery纵向定位滚屏特效代码/title脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/脚本/头体样式类型=' text/CSS '。sty 1 {宽度：500 px高度：500 px溢出-Y:自动；OVERFLOW-x :隐藏；}/*设置层的垂直滚动条*/* { margin :0；划水：0;列表式：无；} body { color : # 333 font :14 px/150% '微软雅黑阿里亚尔宋体，无衬线字体；文本对齐：居中；背景# DCDCDCDC } img { border 33600 } a { text-decoration : none；color : # 333 } html { _ background-image : URL(约：空白)；_背景-附件：已修复；} /* html加上这段代码用于取消ie6滚动时候元素震动bug *//* content */# content {位置：相对；z指数：0;左填充左侧：250像素宽度宽度：860px}。文章{ background : # 04 ACA text-align : left；} .文章dt {宽度：60%；衬垫-顶部：50像素；余量：0自动调整：正常40px/200% '微软雅黑；color : # ffft ext-shadow :1 px 1px 1px # 666；} .文章dd { position:relativez索引：1;宽度：60%;margin:20px auto 0 auto}。第截止日期（Deadline Date的缩写）条con { position:relativez索引：1;padd :30 pxfont : normal 16px/200% '微软雅黑；} .第截止日期（Deadline Date的缩写）条con p { text-indent :24 px；边距-底部：20 px} .con { width :500 pxoverflow-y :自动；OVERFLOW-x :隐藏；} .hside { position:fixedz索引：1;left:50pxtop:5px宽度宽度：180像素高度：40 px线高：40 px背景技术# f50color: # fff字体系列：仿宋；font-size :15 px} .sideGuide {位置：固定；z索引：1;left:50pxtop:45px宽度宽度：180像素背景# fff高度：90%;溢出-Y:自动；OVERFLOW-x :隐藏；} .侧面导轨h3 { height:40px线高：40 px背景技术# f50 font-weight : bold；color: # fff}。侧导轨ul { padd :10 px 0；} .侧面导轨li { height:32px线高：32 px位置：相对；字体粗细：加粗；边框-底部：1px实心# f4f4f4垂直对齐：毫米；字体系列：仿宋；font-size :15 px} .sideGuide li s { display:none位置：绝对；top :0 left :-10px；宽度：10 px背景： # 555;高度：32px}。侧面指南阿利{ display : block color : # 999 }。侧导视阿利：悬停{文饰：无；color: # f50}。一边引导李。在s { display :块上；} .一边引导李。{背景： # F4F4；color : # 333 }/style div id=' content ' div class=' con ' style=' background :蓝色；id='box0' h3作者声明/h3 pjquery纵向定位滚屏特效代码，是个人业余兴趣爱好写的，是基于jquery一个特效，没有任何封装，只是提供一种思考方式和实现方法，代码共享可随便使用，可能存在臭虫，但本人不承担任何修复病菌的责任/p/div class=' con ' style=' background :绿色；id='box1' h3电影新闻/h3 p乔治R R马丁用一部奇幻巨著笼络了亿万粉丝，终使得它被搬上小荧屏，却炮制出了瑰丽如电影的史诗之作。紧接着，它创造高收视，成为金球与艾美的常客，以大投资获得大回报，更吊足了"冰火迷"的胃口。自2011年暖春推出《权力的游戏》 以来，第一季的浩瀚铺陈，第二季的华丽发展，至今年第三季的彪悍回归，HBO缔造了美剧史上的一段奇迹，赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞，以及活色生香的情色场面，使得它光彩熠熠，且一直呈"渐入佳境"的趋势。

/p p Now 《权力的游戏》，以其强大的外星军团和错综复杂的人际语境，再次让观众一起见证荣耀，展现其华丽与精致、美好与残酷。让我们以图解的形式回到这部神作《前世》，解读它的伟大，期待它华丽的后续！/p p这部《权力的游戏》，观众会陪它走到最后！本话题将以轻松的角度，以“冰火”的数字图腾为例，来迎接冰火的回归。/p/div class=' con ' style=' background : yellow；'ID=' box 2 ' h3People ' News/h3pGeorge Raymond Richard Martin凭借一部奇幻巨作赢得了数亿粉丝，这部巨作最终让它被搬上了小屏幕，但却产生了一部像电影一样的壮丽史诗。随后，它创造了很高的收视率，成为了金球奖和艾米的常客，并以一笔大投资获得了很大的回报，进一步激起了“冰火迷”的胃口。自2011年在暖春推出《权力的游戏》以来，HBO创造了美剧史上的奇迹，赢得了口碑和收视率的高潮。七国之间的英雄战争，迂回的宫廷战术，人性与兽性的激烈碰撞，以及活泼芬芳的情色场景，使其光彩夺目，始终呈现出“越来越好”的趋势。/p p Now 《权力的游戏》，以其强大的外星军团和错综复杂的人际语境，再次让观众一起见证荣耀，展现其华丽与精致、美好与残酷。让我们以图解的形式回到这部神作《前世》，解读它的伟大，期待它华丽的后续！/p p这部《权力的游戏》，观众会陪它走到最后！本话题将以轻松的角度，以“冰火”的数字图腾为例，来迎接冰火的回归。/p/div class=' con ' style=' background : red；'Id=' box3' h3tv news /h3 p乔治RR马丁凭借一部奇幻巨作赢得了数亿粉丝，这部巨作最终让它被搬上了小屏幕，但却产生了一部像电影一样的壮丽史诗。随后，它创造了很高的收视率，成为了金球奖和艾米的常客，并以一笔大投资获得了很大的回报，进一步激起了“冰火迷”的胃口。自2011年在暖春推出《权力的游戏》以来，HBO创造了美剧史上的奇迹，赢得了口碑和收视率的高潮。七国之间的英雄战争，迂回的宫廷战术，人性与兽性的激烈碰撞，以及活泼芬芳的情色场景，使其光彩夺目，始终呈现出“越来越好”的趋势。/p p Now 《权力的游戏》，以其强大的外星军团和错综复杂的人际语境，再次让观众一起见证荣耀，展现其华丽与精致、美好与残酷。让我们以图解的形式回到这部神作《前世》，解读它的伟大，期待它华丽的后续！/p p这部《权力的游戏》，观众会陪它走到最后！本话题将以轻松的角度，以“冰火”的数字图腾为例，来迎接冰火的回归。/p/div div class=' con ' style=' background : orange；'id=' box4 ' H3 wzh/H3 pwangzihup now 《权力的游戏》带来了它强大的外星军团和错综复杂的人际语境，再次让观众一起见证荣耀，从而展现它的华丽与精致，美丽与残酷。让我们以图解的形式回到这部神作《前世》，解读它的伟大，期待它华丽的后续！/p p这部《权力的游戏》，观众会陪它走到最后！本话题将以轻松的角度，以“冰火”的数字图腾为例，来迎接冰火的回归。/p p Now 《权力的游戏》，以其强大的外星军团和错综复杂的人际语境，再次让观众一起见证荣耀，展现其华丽与精致、美好与残酷。让我们以图解的形式回到这部神作《前世》，解读它的伟大，期待它华丽的后续！/p p这部《权力的游戏》，观众会陪它走到最后！本话题将以轻松的角度，以“冰火”的数字图腾为例，来迎接冰火的回归。

br/br/br/导航/H3 div=' SideGuide ' ul Li class=' on ' a href=' JavaScript : void(0)'作者声明/as/s/Li lia href=' JavaScript : void(0 '电影新闻/as/s/Li lia href=' JavaScript : void(0 '人物新闻/as/s/Li lia href=' JavaScript : void(0 '电视新闻/as/s/Li lia href=' JavaScript : void(0)' wzh/as/s/Li/ul/div/div脚本类型='text/javascript '(函数($){ var goTo=$().con’)；var guide=$(' .侧导板’)；var guideLi=$(' .边导李’)；定义变量索引=0;var direct=0；//设置宽高//var reset fun=fun(){ GoTo。每个(function(){ })；}//重置fun()；//屏幕滚动var Gotofun=function(){ var len=document。getelementbyid(' box '索引).offsetTop//获取差异层到页面顶部的高度//alert(len)；//警报(索引);direct=0；if(index 0){ index=0；return } if(index=guideli。size()){ index=guideli。size()-1；return } $(“html，body”).停止()。animate({ scrollTop:len }，300，' swing '，function(){ direct=0；});guideLi.removeClass('on ')。eq(指数)。添加CLaSS(' on ')；} guideLi。每个（函数(一){ $(这个).单击(function(){ index=guideli。索引($(this))；goToFun()；}) });//$(窗口)。调整大小(函数(){ });/* 滚轮事件*/var scrollFunc=function(e){ e=e | | window。事件；if(e轮增量){ direct=(-e轮增量/120)；} else if(e . detail){ direct=e . detail/3；} if(direct=8){ goToFun(index)} if(direct=-8){ goToFun(index-)} } if(document。addeventlistener){ document。addeventlistener(' domousescroll '，scrollFunc，false)；}窗口。onmousewheel=document。onmousewheel=scrolfunc})(jQuery)；/script/body/html/prebr br p/p pre/pre p/p