js实现目录定位正文示例


Posted in Javascript onNovember 14, 2013

一:先查看截图效果

1)
js实现目录定位正文示例 
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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery纵向定位滚屏特效代码</title> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
</head> 
<body> 
<style type="text/css"> 
.sty1{width:500px;height:500px;OVERFLOW-Y: auto; OVERFLOW-X:hidden;}/*设置层的垂直滚动条*/ 
*{margin:0;padding:0;list-style:none;} 
body{color:#333;font:14px/150% "Microsoft YaHei", Arial,"宋体",sans-serif;text-align:center;background:#DCDCDC;} 
img{border:0;} 
a{text-decoration:none;color:#333;} 
html{ _background-image:url(about:blank);_background-attachment:fixed;} 
/* html加上这段代码用于取消ie6滚动时候元素震动bug */ 
/* content */ 
#content{position:relative;z-index:0;padding-left:250px;width:860px;} 
.article{background:#04caca;text-align:left;} 
.article dt{width:60%;padding-top:50px;margin:0 auto;font:normal 40px/200% "Microsoft YaHei";color:#fff;text-shadow:1px 1px 1px #666;} 
.article dd{position:relative;z-index:1;width:60%;margin:20px auto 0 auto;} 
.article dd .con{position:relative;z-index:1;padding:30px;font:normal 16px/200% "Microsoft YaHei";} 
.article dd .con p{text-indent:24px;margin-bottom:20px;} 
.con{width:500px;OVERFLOW-Y: auto; OVERFLOW-X:hidden;} 
.hside{position:fixed;z-index:1;left:50px;top:5px;width:180px;height:40px;line-height:40px;background:#f50;color:#fff;font-family:仿宋;font-size:15px;} 
.sideGuide{position:fixed;z-index:1;left:50px;top:45px;width:180px;background:#fff;height:90%;OVERFLOW-Y: auto; OVERFLOW-X:hidden;} 
.sideGuide h3{height:40px;line-height:40px;background:#f50;font-weight:bold;color:#fff;} 
.sideGuide ul{padding:10px 0;} 
.sideGuide li{height:32px;line-height:32px;position:relative;font-weight:bold;border-bottom:1px solid #f4f4f4;vertical-align:middle;font-family:仿宋;font-size:15px;} 
.sideGuide li s{display:none;position:absolute;top:0;left:-10px;width:10px;background:#555;height:32px;} 
.sideGuide li a{display:block;color:#999;} 
.sideGuide li a:hover{text-decoration:none;color:#f50;} 
.sideGuide li.on s{display:block;} 
.sideGuide li.on a{background:#f4f4f4;color:#333;} 
</style> 
<div id="content"> 

<div class="con" style="background:blue;" id="box0"> 
<h3>作者声明 
</h3> 
<p>jquery纵向定位滚屏特效代码,是个人业余兴趣爱好写的,是基于jquery一个特效,没有任何封装,只是提供一种思考方式和实现方法,代码共享可随便使用,可能存在bug,但本人不承担任何修复bug的责任。</p> 
</div> 
<div class="con" style="background:green;" id="box1"> 
<h3>电影新闻</h3> 
<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:yellow; " id="box2"> 
<h3>人物新闻</h3> <p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:red; " id="box3"> 
<h3>电视新闻</h3> <p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝,终使得它被搬上小荧屏,却炮制出了瑰丽如电影的史诗之作。紧接着,它创造高收视,成为金球与艾美的常客,以大投资获得大回报,更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来,第一季的浩瀚铺陈,第二季的华丽发展,至今年第三季的彪悍回归,HBO缔造了美剧史上的一段奇迹,赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞,以及活色生香的情色场面,使得它光彩熠熠,且一直呈“渐入佳境”的趋势。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
</div> 
<div class="con" style="background:orange; " id="box4"> 
<h3>wzh</h3> <p>wangzihu<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。</p> 
<p>如今《权力的游戏》带着它浩荡的异鬼军团,以及错综复杂的人际关系脉络,再次让观众一同见证辉煌,以彰显其恢弘与细腻,美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”,解读它的伟大,并且一同期待它华丽的后续吧!</p> 
<p>这场“权力的游戏”,观众将奉陪到底!本专题将图解“冰火”数字图腾,换个轻松的角度,迎接冰火的回归。<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p> 
</div> 
</div> 
</div> 
<div class="hside"> 
<h3>导航</h3> 
<div class="sideGuide" > 
<ul> 
<li class="on"><a href="javascript:void(0)">作者声明</a><s></s></li> 
<li><a href="javascript:void(0)">电影新闻</a><s></s></li> 
<li><a href="javascript:void(0)">人物新闻</a><s></s></li> 
<li><a href="javascript:void(0)">电视新闻</a><s></s></li> 
<li><a href="javascript:void(0)">wzh</a><s></s></li> 
</ul> 
</div> 
</div> 
<script type="text/javascript" > 
(function($){ 
var goTo = $(".con"); 
var guide = $(".sideGuide"); 
var guideLi = $(".sideGuide li"); 
var index=0; 
var direct=0; 
//设置宽高 
//var resetFun = function(){ goTo.each(function(){ }); } 
//resetFun(); 
//屏幕滚动 
var goToFun = function(){ 
var len=document.getElementById("box"+index).offsetTop;//获取div层到页面顶部的高度 
//alert(len); 
//alert(index) ; 
direct=0; 
if(index<0){ index=0; return } 
if(index>=guideLi.size()){ index=guideLi.size()-1; return } 
$("html,body").stop().animate({ scrollTop:len },300,"swing",function(){direct=0; }); 
guideLi.removeClass("on").eq(index).addClass("on"); 
} 
guideLi.each(function(i){ $(this).click(function(){ index=guideLi.index( $(this) ); goToFun(); }) }); 
//$(window).resize(function(){ }); 

/* 滚轮事件 */ 
var scrollFunc=function(e){ 
e=e || window.event; 
if(e.wheelDelta){ direct+= (-e.wheelDelta/120); }else if(e.detail){ direct+=e.detail/3 ; } 
if( direct>=8 ){ goToFun( index++ ) } 
if( direct<=-8 ){ goToFun( index-- ) } 
} 
if( document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } 
window.onmousewheel=document.onmousewheel=scrollFunc; 
})(jQuery); 
</script> 
</body> 
</html></pre><br> 
<br> 
<p></p> 
<pre></pre> 
<p></p>
Javascript 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 #Javascript
javascript间隔刷新的简单实例
Nov 14 #Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 #Javascript
js中prototype用法详细介绍
Nov 14 #Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 #Javascript
JS获取农历日期具体实例
Nov 14 #Javascript
提高jQuery性能的十个诀窍
Nov 14 #Javascript
You might like
php empty函数 使用说明
2009/08/10 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python中使用partial改变方法默认参数实例
2015/04/28 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
pywinauto自动化操作记事本
2019/08/26 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
网络工程师的自我评价
2013/10/02 职场文书
植物生产学专业求职信
2014/08/08 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
技术股东合作协议书
2014/12/02 职场文书