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 相关文章推荐
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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安全防范技巧分享
2011/11/03 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php中switch语句用法详解
2015/08/17 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
JS常用跨域方法实现原理解析
2020/12/09 Javascript
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
自荐信格式简述
2014/01/25 职场文书
公开服务承诺制度
2014/03/26 职场文书
中国梦团日活动总结
2014/07/07 职场文书
贷款承诺书
2015/01/20 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
初中信息技术教学反思
2016/02/16 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL