首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

js实现目录定位正文示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript设计模式之观察者模式（发布者-订阅者模式）
Sep 24 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
微信小程序获取用户信息及手机号（后端TP5.0）
Sep 12 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
通过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
德国购物网站(227) 印度购物网站(45) 西班牙购物网站(115) 新加坡购物网站(41) 瑞士购物网站(28) 日本购物网站(72) 韩国购物网站(27) 巴西购物网站(71) 中国购物网站(172) 加拿大购物网站(185)
You might like
Protoss热键控制
2020/03/14 星际争霸
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Smarty模板语法详解
2019/07/20 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python实现图片彩色转化为素描
2019/01/15 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python实现字符串和数字拼接
2020/03/02 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
经济管理专业自荐信
2013/12/30 职场文书
八年级历史教学反思
2014/01/10 职场文书
中秋节超市促销方案
2014/01/30 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫