博客园侧边滑动目录效果

咱需要申请js权限

默认是没有给权限的.
需要打开博客园后台
进入"设置"标签页
点击"申请开通js权限"
需要注明用途,审核还是很容易通过哒~

其次就是贴代码~

是用两段代码拼凑出来的
https://www.cnblogs.com/xkxf/p/9449982.html
https://www.cnblogs.com/xuehaoyue/p/6650533.html#
我不生产代码 我只是代码的搬运工_(:з」∠)_

写博客的时候写一个目录并且用div包起来

<div id="diy_right_menu"></div>

这个贴到css框里

#diy_right_menu {
                opacity: 0.05;
                position: fixed;
                right: 2%;
                top: 2%;
                width: 20em;
                margin-top: 1em;
                background-color: black;
                padding: 1em;
                border-radius: 0;
                transition: 0.6s ease-in-out;
                color: white;
            }
            
            #diy_right_menu:hover {
                color: white;
                right: 2%;
                top: 2%;
                border-radius: 5%;
                opacity: 1.3;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
                transition: 0.4s ease-in-out;
            }
            
            #diy_right_menu a {
                color: #f2f2f2cc;
                transition: 0.4s ease-in-out;
            }
            
            #diy_right_menu a:hover {
                font-size: larger;
                color: blue;
                background-color: bisque;
                transition: 0.4s ease-in-out;
            }

这个贴到页脚HTML框里

<script language="javascript" type="text/javascript">
    function GenerateContentList() {
        var mainContent = $('#cnblogs_post_body'); 
        var h2_list = $('#cnblogs_post_body h2'); //如果你的章节标题不是h2,只需要将这里的h2换掉即可

        if (mainContent.length < 1)
            return;

        if (h2_list.length > 0) {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="diy_right_menu" style="color:#152e97;">';
            content += '<p style="font-size:18px;"><b>目录</b></p>'; 
            content += '<ul>';

            for (var i = 0; i < h2_list.length; i++) {
                var go_to_top =
                    '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' +
                    i + '"></a></div>';
                $(h2_list[i]).before(go_to_top);

                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for (var j = 0; j < h3_list.length; j++) 
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if (!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
                }

                var li2_content = '';
                if (li3_content.length > 0)
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content +
                    '</ul></li>';
                else
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
                content += li2_content;
            }
            content += '</ul>';
            content += '</div><p>&nbsp;</p>';
            content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
            if ($('#cnblogs_post_body').length != 0) {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }
    }

    GenerateContentList();

    //点击链接页面滑动到指定区域
    $(document).ready(function () {
        $('a').click(function () {
            var className = $.attr(this, 'href').substr(1); //获取href参数#后面的ID                            
            $('html, body').animate({
                scrollTop: $('a[name="' + className + '"]').offset()
                    .top //获取a书签的scrollTop值            
            }, 500); //以500毫秒滑行                
            return false;
        });
    });
</script>

如果目录太长/需要入场动画就去原帖啦 我觉得现在这个功能就够我使用了
如果这个帖子有帮到你就去原帖夸夸原博主ya~