安装好wp-content-index后进行如下设置:

其中标红处必须标红,用于检索锚点。
在文章页面添加如下js代码:

$(function() {
var wpindex = $("#content-index");
if (wpindex.length > 0) {
var wpindex_top = wpindex.offset().top - 65;
var wpindex_left = wpindex.offset().left;
var wpindex_ttop = wpindex.offset().top;
var ul = $("#content-index-contents");
var lis = ul.find("li");
$.each(lis,
function(i) {
$(this).find("a").attr("href", "javascript:scorllTo(" + i + ")");
});
$(window).scroll(function() {
if ($(window).scrollTop() > wpindex_top) {
if (wpindex.css("position") != "fixed") {
wpindex.css("position", "fixed");
wpindex.css("left", wpindex_left + "px");
wpindex.animate({
left: -28,
top: 150
},
1500);
}
} else {
if (wpindex.css("position") != "relative") {
wpindex.css("position", "relative");
wpindex.css("top", "0px");
wpindex.animate({
left: 0,
top: 0
},
1000);
}
}
});
}
jQuery(".content-index-heading").find("em").hide();//改行代码控制显示是否显示每一个锚点编号,自行去掉或保留
})
function scorllTo(i)
{
var hs = jQuery(".content-index-heading");
var top = jQuery(hs[i]).offset().top;
jQuery("body,html").animate({
scrollTop: top - 60
},
600);
}

wp-content-index文章目录插件使用效果调整的更多相关文章

  1. WordPress 文章目录插件 Easy Table of Contents 配置教程

    今天介绍一款目录插件,本站已经使用一段时间,感觉不错,实现效果可以看文章页右侧边栏有目录,点击目录内容会快速定位.推荐给大家. 一.安装Easy Table of Contents 插件主页搜索Eas ...

  2. 使用autoc js生成文章目录(侧边)导航栏

    介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具.autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的 ...

  3. nginx 静态化合集(去掉index.php目录)

    访问某域名时,去掉index.php目录时达到效果一样 如:www.test1/index.php/test2跟www.test1/test2效果一致 在vhosts.conf中加重写就可以了 loc ...

  4. wordpress必装的插件 wp最常用的十个插件

    wordpress是世界上著名的博客系统,简称wp.一般新安装完wordpress以后,往往需要首先安装一些插件,这样才可以使用wordpress的更多功能.wp最常用的十个插件有哪些呢,可能根据每个 ...

  5. 用React实现一个自动生成文章目录的组件

    原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...

  6. github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)

    使用的yilia主题之后,还需要进行自己的定制配置 1.图片的位置 比如打赏的支付宝二维码图片,是在当前博客的source/assets/img/下 (不是当前主题) 配置:(在yilia主题下文件里 ...

  7. c#Winform程序调用app.config文件配置数据库连接字符串 SQL Server文章目录 浅谈SQL Server中统计对于查询的影响 有关索引的DMV SQL Server中的执行引擎入门 【译】表变量和临时表的比较 对于表列数据类型选择的一点思考 SQL Server复制入门(一)----复制简介 操作系统中的进程与线程

    c#Winform程序调用app.config文件配置数据库连接字符串 你新建winform项目的时候,会有一个app.config的配置文件,写在里面的<connectionStrings n ...

  8. CesiumJS 2022^ 源码解读[0] - 文章目录与源码工程结构

    很高兴你能在浮躁的年代里还有兴趣阅读源代码,CesiumJS 至今已有十年以上,代码量也积累了三十多万行(未压缩状态). 我也很荣幸自己的文章能被读者看到,如果对你有帮助.有启发,点个赞就是对我最大的 ...

  9. [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解

    无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...

随机推荐

  1. python django 自定义 装饰器

    # -*-coding:utf-8-*- __author__ = "GILANG (pleasurelong@foxmail.com)" """ d ...

  2. 在Site Settings下找不到Navigation标签

    有时候我们可能找不到Navigation标签, 仅仅在Look and Feel下面看到"Quick launch" 如何才能找到我们想要的"Navigation&quo ...

  3. 2013 年 —— Facebook 在开源方面的工作介绍

    自从 Facebook 的第一行PHP代码,第一句 MySQL 的 INSERT 语句,开源就已经是我们工程哲学中的一个重要的部分. 现在,我们使用.维护并为大量的主要项目做出了贡献——涉及多种领域如 ...

  4. BZOJ 1008 越狱

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  5. [BZOJ 1576] [Usaco2009 Jan] 安全路经Travel 【树链剖分】

    题目链接: BZOJ - 1576 题目分析 首先Orz Hzwer的题解. 先使用 dijikstra 求出最短路径树. 那么对于一条不在最短路径树上的边 (u -> v, w) 我们可以先沿 ...

  6. Reducing the Dimensionality of data with neural networks / A fast learing algorithm for deep belief net

    Deeplearning原文作者Hinton代码注解 Matlab示例代码为两部分,分别对应不同的论文: . Reducing the Dimensionality of data with neur ...

  7. TWinControl.SetBounds与TWinControl.UpdateBounds赏析(定义和调用)

    先看它们的函数内容: procedure TControl.SetBounds(ALeft, ATop, AWidth, AHeight: Integer); begin // 虚函数,TWinCon ...

  8. index unique scan

    INDEX UNIQUE SCAN 索引唯一扫描.单块读 只可能发生在unique index/primary key 等值查找                      等待事件:db file s ...

  9. Linux负载均衡软件LVS之一(概念篇)

    一. LVS简介 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是www.linuxvirtualserver ...

  10. 【转】Android驱动开发之earlysuspend睡眠模式编程总结

    原文网址:http://blog.csdn.net/bigapple88/article/details/8669537 (1)添加头文件: #include <linux/earlysuspe ...