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

发布时间:2018-09-25 22:36:26

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

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

一、返回顶部代码

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

// HTML代码
<ul id="scroll">
    <img class="go-top" src="http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll.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', 'http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll2.gif');
})
$('.go-top').mouseout(function() {
    $('.go-top').attr('src', 'http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll.png');
})

 

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

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

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

  • begin侧边滚动栏是在主题目录下template\scroll.php中(复制上面HTML代码)
  • 在主题目录下的style.css中搜索#scroll就可以找到对应的样式(复制CSS代码)
  • begin原滚动栏的js在js\script.js中,一样搜索就可以找到,删除原来的(复制上面的jquery代码)
小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。