<html><head><title>jquery实现章节目录效果</title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

<style>

body{background-attachment:fixed;background-image:url(about:blank)}/*修正IE6下浮动层闪动*/

#anchor{position:fixed;top:150px;right:0px;border:solid 1px black;}

#anchor.fixie6{position:absolute;top:expression(eval(document.documentElement.scrollTop)+150);}

#anchor a{text-decoration:none;color:blue;}

#anchor a.focus{background:red;color:white;}

</style>

<script>

    if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.fixIE6= true<\/script><![endif]-->');//增加是否为IE6的判断

    window.onload = function () {

        var strict = document.compatMode == 'CSS1Compat', contents = $('div>a[name]:first-child'), anchors, s = [];

        contents.each(function () { s[s.length] = '<a href="#' + this.name + '">' + this.name + '</a>'; });

        anchors = $('<div id="anchor"' + (window.fixIE6 ? ' class="fixie6"' : '') + '>' + s.join('<br>') + '</div>').appendTo(document.body).find('a'); //添加文章的章节目录

        contents = contents.parent(); //更新章节锚点为内容节点

        //计算内容节点的上端点和下端点

        contents.each(function () { var o = $(this); o.data('top-bottom', { top: o.offset().top, bottom: o.offset().top + o.height() }); });

        $(window).scroll(function () {

            var viewTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop); //可见高度顶部

            var viewBottom = document[strict ? 'documentElement' : 'body'].clientHeight + viewTop; //可见高度底部

            contents.each(function (index, el) {

                var tb = $(this).data('top-bottom');

                if ((tb.top > viewTop && tb.top < viewBottom) || (tb.bottom > viewTop && tb.bottom < viewBottom) || (tb.top < viewTop && tb.bottom > viewBottom))

                    anchors.eq(index).addClass('focus');

                else

                    anchors.eq(index).removeClass('focus');

            }).trigger('scroll');

        });

    };

</script>

</head><body><div style="height:800px"><a name="anchor1">anchor1</a></div>

<div style="height:800px"><a name="anchor2">anchor2</a></div>

<div style="height:800px"><a name="anchor3">anchor3</a></div>

<div style="height:800px"><a name="anchor4">anchor4</a></div><div id="anchor"><a href="#anchor1" class="focus">anchor1</a><br><a href="#anchor2" class="focus">anchor2</a><br><a href="#anchor3" class="">anchor3</a><br><a href="#anchor4" class="">anchor4</a></div></body></html>

jquery实现章节目录效果的更多相关文章

  1. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  2. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  3. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  4. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  5. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  8. Duilib实现类似电脑管家扫描目录效果

    实现原理: 1.后台开线程遍历目录,遍历出一个文件路径在界面上更新显示(通过发消息通知主界面) 2.需要扩展一下Duilib控件,在此我扩展了CLabelUI,重写了PaintText函数 扩展控件的 ...

  9. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

随机推荐

  1. vlc 在ie11 中的addEventListener事件不触发

    在vlc控件中触发一事件,在IE11之前的版本使用attachEvent注册一个回调函数后IE11可以捕获到事件,但IE11中提示attachEvent不支持.经查询发现IE11已经去掉了attach ...

  2. 重置mysql数据库密码

    # /etc/init.d/mysql stop # mysqld_safe --user=mysql --skip-grant-tables --skip-networking & # my ...

  3. ios7 tableview scrollsToTop 不执行处理方法

    ios7中调用[self.tableview scrollsToTop] 没有效果(ios8中也没有效果) stackflow 处理方法: [self.tableviewscrollRectToVis ...

  4. android-23 View.java - dispatchTouchEvent源码

    public class View implements Drawable.Callback, KeyEvent.Callback, AccessibilityEventSource { /** * ...

  5. linux mint 崩溃

    换完linux mint 今天突然崩溃了.出现如下错误 因为是双屏.一个屏幕显示一般,这么不重要.搜了一下,找到解决方案 解决办法 ctrl+atl+f1 login sudo apt-get ins ...

  6. 创建javascript对象的几种方式

    ECMAScript提供的对象有:String.Date.Array.Boolean.Math.Number.RegExp.Global 程序中需要用到很多自定义的js对象 1.直接创建 var ob ...

  7. CentOS7：配置SVN服务器

    1. 安装 CentOS通过yum安装subversion. $ sudo yum install subversion subversion安装在/bin目录: $ which svnserve / ...

  8. 【HOW】SharePoint如何彻底删除用户

    在网站中打开“人员和组”,在选中某一用户后,一般只有“从用户组中删除用户”操作.此操作只能将此用户从此用户组中删除,却不能从网站集中彻底删除. 要将用户从网站集中彻底删除,可按如下步骤操作: 1. 在 ...

  9. 如何在winform或者wpf里面打开浏览器并设置宽高位置

    需要SHDocVw.dll 文件或AxSHDocVw.dll 文件,.net默认是没有的,先生产这两个文件,请在Visual Studio 命令提示符下运行下面的命令: aximp %WINDIR%\ ...

  10. openlayers优化项

    做了一个简单的样式,但是做的不怎么样:希望和大家讨论下载动态图那里,怎么能够提高效率,提高数据,能够快速反应:一般的处理方法是什么?