为你的博客园添加平滑移动到页面顶端的锚点和tag云

首先我的目录是在marvin的基础上二次开发的.然后我发现锚点图和目录都在同一个图上面,所以就一起用了.

返回顶部锚点:

我用以前旧版bilibili的那个函数.可以做到平滑滚动到页面,并且在触顶前不能向下滚屏.具体的看我参考链接.当然因为涉及到js要申请权限,简单的话a标签href用#top当然可以,体验有点差罢了.

然后因为我懒,锚点的出现条件直接和目录的出现条件弄在一起.也就是匹配元素相对滚动条顶部的偏移超过200时显示.

tag云:

我用Google随便找的.用的矢量绘图.

但是这玩意有个局限性,就是其实例化函数限制要用元素ID.于是我用一个div包裹了标签区的ul.然后实例化.实例化成功的时候隐藏掉标签区和标题,设置canvas的蠕动和显示

window.onload=function(){                      
    $("ul:first","#sidebar_categories").wrap("<div id='caonimagebi' style='display:block'></div>")  
    if(!$('#myCanvas').tagcanvas({
          textColour: '#519cea',
          outlineColour: '#404040',
          reverse: true,
          depth: 0.8,
          maxSpeed: 0.10
        },'caonimagebi')) {
          console.log("日了狗了")
          $('#myCanvasContainer').hide(); 
        }
        else{
            $('#myCanvasContainer').css('display', 'block');    
            $('#myCanvas').tagcanvas("setspeed", [0.015, -0.05]);        
             $('#caonimagebi').css('display', 'none');                    
              $('.catListTitle:first-child','#sidebar_categories').empty();//去掉随笔分类  
        }   
               }

但是这样有个局限性,就是因为写在onload里面,有点生硬,你们可以看到,这玩意像是隐搞出来的,不和谐.这就是让我抓狂的地方了.　

　

抓狂:

我就是很好奇,为毛这个包裹方法写在onready里面就不行了,而且是线上的时候不行.我是有在本地测试的,本地写在onready的时候页面很正常,传到博客园就变成这样.

博客园,你们家的js好神奇

备注:

1博客园的文件系统是软删除,慢更新.就是你删了文件还在,你删了那个文件上传同名文件的话,服务器上的文件还是旧版的,所以需要自己手动修改文件名和相应的引用文件名.

2这个目录有一定的局限性,也就是h2,h3,h4.方法写的不是很健壮,而且目录的高度应该尽可能的根据标题数来计算,然后弄个上限,但是我也懒得改了.还有就是z-index的问题.这个要格外注意下.我是把旁边的锚点和返回顶部设置为999了.

3博客园自带jQuery.所以无需另外引用 

参考链接:

去把bilibili的返回顶点锚点扒了下来

如何给你的为知笔记添加一个漂亮的导航目录

http://www.goat1000.com/tagcanvas-functions.php