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 ...
随机推荐
- Connect mysql on Linux from Windows
ON LINUX: 1 sudo apt-get install mysql-server 2 sudo apt-get install python-dev 3 sudo apt-get insta ...
- NodeJs开发学习目录
1.Nodejs基本概念及Nodejs.npm安装测试[2014-06-06] 2.开发工具简介(主要介绍Sublime Text使用) [2014-06-06] 3.Sublime text插件安装 ...
- SQL SERVER CEILING 函数 取整时的坑。。。
CEILING ---返回大于或等于指定数值表达式的最小整数 当舍去同一个大小的值 但是正负方向不一致时要注意小数位四舍五入的问题 例如: SELECT CEILING($123.45), CEI ...
- protocol(协议) 和 delegate(委托)也叫(代理)---辨析
protocol和delegate完全不是一回事. 协议(protocol),(名词)要求.就是使用了这个协议后就要按照这个协议来办事,协议要求实现的方法就一定要实现. 委托(delegate),(动 ...
- linux 消息队列的限制
消息队列的系统限制 作者:冯老师,华清远见嵌入式学院讲师. 消息队列是System V的IPC对象的一种,用于进程间通信,会受到系统的限制,本文主要描述了三个限制.第一:议个消息的最大长度:第二:消息 ...
- Journey of Android for Mac
下了决心要学Java,几个同事都建议我去学Android,自己觉得能做点应用放手机上玩玩也比较有动力. 沈逸有篇文章里面写道: 搞C的看不起搞C++的. 搞C++的看不起搞java的. 搞java的看 ...
- Artem and Array
Codeforces Round #253 (Div. 1) C:http://codeforces.com/problemset/problem/442/C 题意:给你一个序列,然后你每次可以删除一 ...
- XSHELL和XFTP,亲兄弟啊。
XSHELL在LINUX和WINDOWS之间传输文件时不力啊.又对FTP不灵活的时候,XFTP就可以出场了. 只要登陆进XSHELL就可以操作了.并且XFTP客户端和命令行可以灵活配置选择. 然后,玩 ...
- UpdateLayeredWindow, Layered Windows, codeproject
http://www.codeproject.com/Articles/16362/Bring-your-frame-window-a-shadow http://www.codeproject.co ...
- bzoj3230
以前觉得这题好难,现在觉得这题还是挺简单首先看到类似LCP问题不难想到后缀数组吧前后的相似需要我们分别做一个后缀数组和“前缀数组”(就是把字符串反向然后跑后缀数组)这道题的难点就在于如何确定子串是什么 ...