微信扫描,分享到朋友圈和群
WordPress博客添加“返回顶部”按钮
“返回顶部”在网页页面上非常实用。一般主题都没有自带该按钮。可以自己DIY一个。
添加步骤,打开博客的后台管理,依次进入“外观”,“编辑”,打开“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="https://cdn.codefine.site:5443/wp-content/themes/thematic/gallery/totop2.png" border=0 width="55px" width="55px" 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>
本站效果截图:
6 条评论
很实用! 学习了。
您的博客不错,博客嘛,个人网站,当然可以做得很专业,也可以做得很休闲!
还有,鼠标放上去会显示“回到顶部”的提示字样可能会更完美呢
我在new iPad上面试过,可以用的啊。
很实用很简洁,但是在ipad上或者平板上访问,因为屏幕大小的关系,就看不到这个按钮了。
呃 好简单的一个按钮…..