安装好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. prototype/constructor/__proto__之prototype简单应用

    一.简单使用构造原型加prototype造简单的轮子. 1.想jQ那样获取HTML元素,先看JS代码 function Cmf() { //创建构造函数 this.arry = [] } Cmf.pr ...

  2. iOS开源项目

    在结束了GitHub平台上“最受欢迎的Android开源项目”系列盘点之后,我们正式迎来了“GitHub上最受欢迎的iOS开源项目”系列盘点.今天,我们将介绍20个在GitHub上非常受开发者欢迎的i ...

  3. 用C++进行函数式编程

    http://www.programmer.com.cn/12717/   文 / John Carmack 译 / 王江平 <Quake>作者Carmack认为追求函数式的程序设计有着实 ...

  4. STM32启动文件的选择

    移植了同事一个程序,然后死活不能用,发现启动文件错了,明天继续调.真把人折腾死了. stm32给的库文件太琐碎了,正如它的芯片型号一样繁多,例如启动文件: 网上查到的各个文件的解释是: startup ...

  5. 面向对象涉及SOLID原则

    S = Single Responsibility Principle 单一职责原则 O = Opened Closed Principle 开放闭合原则  L = Liscov Substituti ...

  6. Play on Words

    poj1386:http://poj.org/problem?id=1386 题意:给你n个单词,问你是否能够通过调整单词的顺序存在这样的一个序列,使得 每个单词的首字母是前一个单词的尾字母. 题解: ...

  7. 【HDOJ】2699 Five in a Row

    wa了几次,至少要考虑4个方向:下.右.左下.右下.很像当年北航的机试题目. /* 2699 */ #include <iostream> #include <cstdio> ...

  8. Unity笔记

    1.使某个对象上的脚本失效和生效: GameObject.Find("xxx").transform.GetComponent<xxx>().enabled = fal ...

  9. BZOJ 1072 [SCOI2007]排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1268  Solved: 782[Submit][Sta ...

  10. 【转】onPrepareOptionsMenu 和onCreateOptionsMenu 的区别

    原文网址:http://blog.csdn.net/allenjy123/article/details/7467084 @Override public boolean onCreateOption ...