CSS与Js实现博客园侧边目录与页内滑动

内容索引：

• HOW TO USE
• CSS
• JS
• 效果展示
• 后续1：目录太长
• 后续2：入场动画
• 点个赞😀

存着备用。。

长篇文章如果没有侧边目录的话，会很不方便浏览。

代码是网上找来改的。

首先，我们把目标区域（目录）用一个div包装一下：

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

针对这个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;
            }

因为一直飘在那里会遮挡文字，所以设定为鼠标移动过去才显示出来。

虽然我也试过其它方法，例如把这个div设置为可拖动（如下↓ 原作者链接）、类似qq一样隐藏在边缘（css即可实现），但是感觉都太繁琐了、甚至还有点卡。。

        <script>
            var posX;
            var posY;
            fwuss = document.getElementById("diy_right_menu");
            fwuss.onmousedown = function(e) {
                posX = event.x - fwuss.offsetLeft; //获得横坐标x
                posY = event.y - fwuss.offsetTop; //获得纵坐标y
                document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用
            }
            document.onmouseup = function() {
                document.onmousemove = null; //鼠标举起，停止
            }

            function mousemove(ev) {
                if(ev == null) ev = window.event; //IE
                fwuss.style.left = (ev.clientX - posX) + "px";
                fwuss.style.top = (ev.clientY - posY) + "px";
            }
        </script>

点击链接后进行页内滑动（jquery博客园自带）：

        <script type="text/javascript">
            //点击链接页面滑动到指定区域
            $(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>

用css包装后的效果示意图（实际滑动很流畅）：

 

后续1：目录太长

两行css解决

overflow-y: auto;
max-height: 450px;

后续2：添加入场动画：

            @-webkit-keyframes myfirst {
                /* Safari and Chrome */
                0% {
                    transform: translateX(8px);
                }
                33% {
                    opacity: 1;
                    border-radius: 5%;
                    background-color: bisque;
                }
                66% {
                }

-webkit-animation: myfirst 1.8s;