当前位置:万花网 > Wordpress建站 > 正文

一款简洁的wordpress返回顶部按钮样式!

本文最后更新于【 2019-05-21 14:34:42 】,某些文章具有时效性,若有错误或已失效,请在下方 留言 或联系 小P君

前端时间在弄博客主题的时候没有返回顶部样式,后面造访了一下度娘,自己稍作修改的样式,喜欢的童鞋可以拿走哦!(看效果图吧!)也可直接去我博客查看!

一款简洁的wordpress返回顶部按钮样式!

首先,在当前主题目下的style.css里添加如下样式(其中我设置了,1200px以下宽度即不显示,这个考虑到目前手机端基本上用不到这个返回顶部样式!当然你也可以自定义宽度!)

/*blog.ouxiaopi.com 返回顶部样式*/
#gotop{
font-size:33px;
text-align:center;
width:41px;
height:41px;
position:fixed;
bottom:25px;
right:10%;
top:auto;
display:block;
cursor:pointer;
background:#fff;
border-radius:50px;
}
#gotop :hover{
color:#ccc;
}
*html #gotop{
position:absolute;
bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
@media screen and (max-width:1200px){
#gotop{
display:none !important;
}
}

接下来在当前主题的footer.php里面添加如下代码,注意要放到</body>前面

<!-- blog.ouxiaopi.com 返回顶部 -->
<div style="display: none;" id="gotop"><i class="fa fa-angle-up" aria-hidden="true"></i></div>
<script type='text/javascript'>
    backTop=function (btnId){
        var btn=document.getElementById(btnId);
        var d=document.documentElement;
        var b=document.body;
        window.onscroll=set;
        btn.onclick=function (){
            btn.style.display="none";
            window.onscroll=null;
            this.timer=setInterval(function(){
                d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
                if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
            },10);
        };
        function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
    };
    backTop('gotop');
</script>
<!-- blog.ouxiaopi.com 返回顶部END -->
<i class="fa fa-angle-up" aria-hidden="true"></i>

其中的返回顶部的图标可以自定义,可以选择阿里的iconfont,也可以选择Awesome字体,也可以直接将这个删除,然后将 CSS文件中的background改成自己定义的图片地址都可以!

字体图标用法可参考 《wordpress给首页导航添加个性icon!》

有什么想说的可以在下面留言给我哦!

 

wxgzhewm

扫码关注万花网公众号

汇集全网优质电商资源,薅羊毛资源,PS,AI资源,应有尽有。

作者保留所有权,侵删请联系,转载请注明: » 万花网 » 一款简洁的wordpress返回顶部按钮样式!

感觉很棒!可以赞赏支持我哟~

赞(2) 打赏

低至¥89元/年限时抢

抢阿里云服务器1折起代金券

立即抢购

评论1

  1. #1

    我也考虑后期给主题加一个这个功能。

    奶爸de笔记5年前 (2019-05-21)