wordpress博客添加返回顶部小火箭

begin主题这侧边好多功能是鸡肋，返回顶部、到达底部，简体繁体转换等，我用的最多的就是返回顶部，所以索性就把这个主题的侧边功能栏全部去掉，自己加下返回顶部的小火箭图片，美观又好用。你可以打开这两个链接下载这两个小火箭素材，静态小火箭，动态小火箭.一、返回顶部代码我用的是jquery，因为我的博客加载了jquery，不…

begin主题这侧边好多功能是鸡肋，返回顶部、到达底部，简体繁体转换等，我用的最多的就是返回顶部，所以索性就把这个主题的侧边功能栏全部去掉，自己加下返回顶部的小火箭图片，美观又好用。

你可以打开这两个链接下载这两个小火箭素材，静态小火箭，动态小火箭.

一、返回顶部代码

我用的是jquery，因为我的博客加载了jquery，不用白不用，其实用原生js也很方便，具体的代码如下：

// HTML代码<ul id="scroll">    <img class="go-top" src="04/jwqg25xljg2.png" alt="返回顶部"></ul>// CSS代码#scroll {    width: 32px;    float: right;    position: fixed;    right: 100px;    bottom: 50px;    z-index: 9999;}#scroll img{    transform: scale(0.5);    cursor: pointer;}// JS代码$(window).scroll(function() {    if($(window).scrollTop() >= 100){        $('.go-top').fadeIn(300);    }else{        $('.go-top').fadeOut(300);    }});$('.go-top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});$('.go-top').mouseover(function() {    $('.go-top').attr('src', '04/i3qbsxkjjcj.gif');})$('.go-top').mouseout(function() {    $('.go-top').attr('src', 'scroll.png');})

加载图片我使用的是绝对路径，如果你不想下载这两张图片素材，也可以直接引用我网站的。

二、begin主题加入返回顶部代码

下面我以begin主题为例，教下如何放在自己的wordpress博客中。

begin侧边滚动栏是在主题目录下template\scroll.php中（复制上面HTML代码）在主题目录下的style.css中搜索#scroll就可以找到对应的样式（复制CSS代码）begin原滚动栏的js在js\script.js中，一样搜索就可以找到，删除原来的（复制上面的jquery代码）