wordpress添加返回顶部按钮

wwh • 2012-11-16 09:00 • WordPress • 阅读 51670

一直都想给WordPress添加一个返回顶部的按钮，我知道可以有这类型的插件，但不想用插件。于是网上查看了一些文章，找到了一个从百度搜索风云榜这里扒出来的JS代码。

1、找到“返回顶部”的代码，将代码复制到所用主题的footer.php文件，</body>标签之后、</html>标签之前的位置。

<div id=“full” style=“width:50px; height:95px; position:fixed; left:49%; top:476px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;”>
<a><img src=“https://www.wuwenhui.cn/wp-content/uploads/2012/11/feedback_return.gif” border=0 alt=“返回顶部”></a>
</div>
<script src=“https://www.wuwenhui.cn/wp-content/themes/HotNewspro/js/news_top.js” type=“text/javascript”></script>

2、为了防止上述代码调用的js文件失效，可以把 https://www.wuwenhui.cn/wp-content/themes/HotNewspro/js/news_top.js文件保存到自己网站目录内，然后修改为自己的调用地址。

3、下面是news_top.js文件内容：

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) };

4、最后，将图片链接地址换上自己喜欢的图片地址，根据自己的习惯更改高度及位置。

原创文章，作者：wwh，如若转载，请注明出处：https://www.wuwenhui.cn/596.html

登录后才能评论