js实现目录定位正文示例
一：先查看截图效果
1）
2）点击左侧导航栏里的目录会对应到对应的层
二：下载引进jquery-1.7.2.min.js文件
三：页面代码：
[code]
<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>
相关文章
这篇文章主要介绍了js 去掉字符串前后空格实现代码集合,需要的朋友可以参考下2017-03-03
在app中经常会有滚动的跑马灯效果的运用，接下来通过本文给大家介绍使用ionic在首页新闻中应用到的跑马灯效果的实现方法，需要的的朋友参考下2017-02-02
这篇文章主要介绍了延时加载JavaScript代码提高速度的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了微信小程序实现天气预报功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了JavaScript 模块化详解，块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信，下面一起进入文章来接更多详细内容2021-12-12
js removeChild 障眼法之可能出现的错误，大家看下代码就知道了。2009-10-10
在本章中，我们将分析Prototypejs中关于JavaScript继承的实现,需要的朋友可以参考下2016-10-10
javascript删除option选项的多种方法，方便大家选用。2008-11-11
document.all与getElementById、getElementsByName、getElementsByT
Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素2008-12-12
这篇文章主要为大家详细介绍了JavaScript仿聊天室聊天记录实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论