wp-content-index文章目录插件使用效果调整
安装好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文章目录插件使用效果调整的更多相关文章
- WordPress 文章目录插件 Easy Table of Contents 配置教程
今天介绍一款目录插件,本站已经使用一段时间,感觉不错,实现效果可以看文章页右侧边栏有目录,点击目录内容会快速定位.推荐给大家. 一.安装Easy Table of Contents 插件主页搜索Eas ...
- 使用autoc js生成文章目录(侧边)导航栏
介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具.autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的 ...
- nginx 静态化合集(去掉index.php目录)
访问某域名时,去掉index.php目录时达到效果一样 如:www.test1/index.php/test2跟www.test1/test2效果一致 在vhosts.conf中加重写就可以了 loc ...
- wordpress必装的插件 wp最常用的十个插件
wordpress是世界上著名的博客系统,简称wp.一般新安装完wordpress以后,往往需要首先安装一些插件,这样才可以使用wordpress的更多功能.wp最常用的十个插件有哪些呢,可能根据每个 ...
- 用React实现一个自动生成文章目录的组件
原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...
- github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)
使用的yilia主题之后,还需要进行自己的定制配置 1.图片的位置 比如打赏的支付宝二维码图片,是在当前博客的source/assets/img/下 (不是当前主题) 配置:(在yilia主题下文件里 ...
- c#Winform程序调用app.config文件配置数据库连接字符串 SQL Server文章目录 浅谈SQL Server中统计对于查询的影响 有关索引的DMV SQL Server中的执行引擎入门 【译】表变量和临时表的比较 对于表列数据类型选择的一点思考 SQL Server复制入门(一)----复制简介 操作系统中的进程与线程
c#Winform程序调用app.config文件配置数据库连接字符串 你新建winform项目的时候,会有一个app.config的配置文件,写在里面的<connectionStrings n ...
- CesiumJS 2022^ 源码解读[0] - 文章目录与源码工程结构
很高兴你能在浮躁的年代里还有兴趣阅读源代码,CesiumJS 至今已有十年以上,代码量也积累了三十多万行(未压缩状态). 我也很荣幸自己的文章能被读者看到,如果对你有帮助.有启发,点个赞就是对我最大的 ...
- [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解
无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...
随机推荐
- Fedora上配置一个安全FTP
现在流行的FTP服务器,比较著名的有WU-FTP(Washington University FTP)和VSFTP(Very Secure FTP 非常安全的FTP)以及Proftp,pureftp等 ...
- Window.onload事件
window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况
- BAE 环境下 hibernate annotations 配置
annotations 配置 首先需要加入 hibernate-jpa-2.0-api-1.0.1.Final.jar 和 ejb3-persistence.jar 这两个包 ejb3-persis ...
- vs2013update4 vs-mda-remote cordova真机测试ios 解决里面一个坑
sudo npm install -g vs-mda-remote --user=你的用户名 此步骤为安装vs-mda-remote,如果安装成功 执行vs-mda-remote –secure fa ...
- JS:window.onload的使用介绍
作者: 字体:[增加 减小] 类型:转载 时间:2013-11-13我要评论 window.onload在某些情况下还是比较实用的,比如加载时执行哪些脚本等等,下面有几个不错的示例,需要的朋友可以参考 ...
- 转:2014年最酷的30个JavaScript库
原文来自于:http://www.gbtags.com/gb/share/3701.htm 使用JavaScript库将会使开发变的更简单,大部分JavaScript库提供的功能都是极好的,当我们在为 ...
- C#中&与&&的区别
刚刚翻书发现这个问题,在网上找了一下,我的理解吧. 他俩的区别就是“&”和“|”不执行短路计算,而&&和||执行了短路计算. &不执行短路计算 ——————表达式A&a ...
- HttpClient4.3.6 实现https访问
package httptest; import java.io.IOException; import java.nio.charset.Charset; import java.security. ...
- 【Java】理解 UDDI 注册中心的 WSDL
如何发布和查找 WSDL 服务描述 Web 服务描述语言(WSDL)有多种用法.特别是,根据应用程序的需要,WSDL 在 UDDI 注册中心有好几种使用方法.在这第 1 篇文章中(本系列共三篇),我们 ...
- codeforces D. Long Path
http://codeforces.com/contest/408/problem/D 题意:有一排房间每个房间有两扇门,一扇通往第i+1个房间,另一扇通往第p[i]个房间,(p[i]<=i)然 ...