刘连康:如何给WordPress博客添加“返回顶部”按钮

刘连康 网站建设37,6322字数 1327阅读4分25秒阅读模式

“返回顶部”这个按钮在网站上非常实用,但是wordpress自带的主题里都没有这个按钮,我们可以自己制作一个。

 

方法很简单,打开博客的后台管理,依次进入“外观”,“编辑”,打开“footer.php”底部文件,在最后一个</div>与</body>之间添加如下代码,注意替换图片地址(斜体部分)以匹配特定主题。

<div id="full" style="width:88px; height:88px; position:fixed; right:0px;
bottom:0px; margin-left:0px; margin-bottom:0px; z-index:100; text-align:center; cursor:pointer;">
<a>
<img src="http://www.liuliankang.com/wp-content/themes/twentyeleven/images/totop2.png"
border=0 width="19px" width="19px" alt="返回顶部">
</a>
</div>
<script type="text/javascript">
var isie6 = window.XMLHttpRequest ? false: true;
function newtoponload() {
var c = document.getElementById("full");
function b() {
var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (a > 0) {
if (isie6) {
c.style.display = "none";
clearTimeout(window.show);
window.show = setTimeout(function() {
var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (d > 0) {
c.style.display = "block";
c.style.top = (400 + d) + "px"
}
},
300)
} else {
c.style.display = "block"
}
} else {
c.style.display = "none"
}
}
if (isie6) {
c.style.position = "absolute"
}
window.onscroll = b;
b()
}
if (window.attachEvent) {
window.attachEvent("onload", newtoponload)
} else {
window.addEventListener("load", newtoponload, false)
}
document.getElementById("full").onclick = function() {
window.scrollTo(0, 0)
};
</script>

 

本文为原创文章,版权归作者所有,未经授权,禁止抄袭,否则将追究法律责任!

欢迎转载,转载请注明作者和出处,谢谢!

作者:刘连康

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
刘连康
  • 本文由 发表于 2016年8月11日 08:22:27
刘连康:如何将wordpress5.8新版区块编辑器换回旧版本编辑器? 网站建设

刘连康:如何将wordpress5.8新版区块编辑器换回旧版本编辑器?

康哥昨天下午就把个人博客从wordpress5.7.2更新至wordpress5.8版本,升级完成之后,在外表上面看着好像是没什么问题,也没多大变化。 但是,到了晚上10点左右,康哥在个人博客上面写原...
评论  3  访客  2  作者  1
    • 天津网站建设
      天津网站建设 0

      感谢分享

      • mrz
        mrz 0

        为什么添加后,更新文件很慢啊,半天没反应

          • 刘连康
            刘连康

            @ mrz 更新文件很慢有很多原因,建议你检查一下网站是不是安装了很多插件,或者是图片是不是都很大。

        匿名

        发表评论

        匿名网友 填写信息

        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

        确定