增加文章目录toc功能并和.back-to-top同时出现

2017/05/04

文章目录-

步骤一文章目录调用函数
步骤二修改css
步骤三更改DIV
步骤四修改js
步骤五

为了增加用户体验度，使得页面更加美观，我把文章目录嵌入.back-to-top层里，好处是不用再写script，直接引用.back-to-top的js功能，与“返回顶部”按钮在滚动条离顶部一定间距时同时出现。

步骤一文章目录调用函数

①打开footer.php，在<div class=”back-to-top u-hide” onclick=”backToTop();”>后面插入代码<?php echo wpjam_get_toc(); ?>（这个是调用文章目录的函数），自己看了代码总结的，哈哈，有点小确幸 😀 ，
注意，因为footer.php里面没有文章循环函数，所以必须加上这个循环，否则不显示，无效！完整代码如下：

<?php while ( have_posts() ) : the_post(); ?><?php echo wpjam_get_toc(); ?><?php endwhile; ?>

②或者直接把single.php文件里面的<?php endwhile; ?>剪切到footer.php文件里面。

步骤二修改css

把插件里的css替换成，如：（具体根据自己需要美化）

#toc {
    max-width: 240px;
    min-width: 150px;
    padding: 6px;
    margin: 0 0 20px 20px;
    border: 1px solid #EDF3DE;
    font-size: 13px;
    position: absolute;
    right: 500%;
    max-height: 500px;
    overflow: hidden;
    color: #666;
    right: 320%;
    top: -300%;
}
#toc ul:hover {
        margin-bottom: 0;
        max-height: 110px;
        overflow-y: scroll;
        overflow-x: hidden;
}
#toc ul:hover::scrollbar-track, #toc ul:hover::-webkit-scrollbar-track, #toc ul:hover::-moz-scrollbar-track {
   width: 4px;
 }
#toc ul:hover::scrollbar-track, #toc ul:hover::-webkit-scrollbar-track, #toc ul:hover::-moz-scrollbar-track {
   background-color:#808080;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius:2em;
 }
#toc p {
    margin:0 4px;
}
#toc strong {
    border-bottom:1px solid #EDF3DE;
    display:block;
}
#toc span {
    display:block;
    margin:4px 0;
    cursor:pointer;
}
#toc ul{
        margin-bottom: 0;
        max-height: 110px;
        overflow: hidden;
}
#toc li{
    margin:2px 0;
}
#toc small {
    float:right;
}

步骤三更改DIV

打开footer.php文件，找到这行<div class=”back-to-top” onclick=”backToTop();”><div id=”toc-container”>，把 onclick=”backToTop();”删除，换到<span class=”icon-circle-up” >里面，替换后是<span class=”icon-circle-up” onclick=”backToTop();”></span>

步骤四修改js

设置滚动条离顶部间距达到多少时出现或隐藏。打开bundle.js文件，找到下面这句，修改参数即可

window.addComment=addComment;e(window).scroll(function(){var t=e(this).scrollTop(),o=e(".back-to-top");if(t>200){o.removeClass("u-hide")}else{o.addClass("u-hide")}});var i=function(){jQuery("html,body").animate({scrollTop:0},800)};