wordpress添加返回顶部按钮

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

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

  1. <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;”>
  2. <a><img src=“https://www.wuwenhui.cn/wp-content/uploads/2012/11/feedback_return.gif” border=0 alt=“返回顶部”></a>
  3. </div>
  4. <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文件内容:

  1. var isie6 = window.XMLHttpRequest ? false : truefunction 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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
wwhwwh
上一篇 2012-11-16
下一篇 2012-11-19

相关推荐

  • wordpress知更鸟去掉侧边回到首页

    相信不少人在使用知更鸟主题的时候都会发现侧边栏的回到首页按钮不是很显眼,而且也不是很好用,于是就想去掉此按钮,看了下主题文件,找到主题目录下includes文件夹,将scroll.…

    2012-11-15
    5.5K0
  • Gravatar头像不显示完美解决方案

    Gravatar头像不显示完美解决方案 有没有一种方案能完美的解决我们的这些烦恼呢?答案是肯定的。提升Wordpress的Gravatar头像加载速度进阶的方法就是将Gravata…

    2015-08-10
    18.0K4

发表回复

登录后才能评论

评论列表(15条)

  • 婵真
    婵真 2012-12-02 15:22

    路过了。好像是第二次了

  • 新世纪
    新世纪 2012-12-26 10:49

    路过

  • sean
    sean 2013-01-24 11:48

    试了下很好用,就用了。 :mrgreen: 谢谢

  • 董而直秋
    董而直秋 2013-01-28 15:01

    问好,博主!

  • zarte
    zarte 2013-01-31 17:17

    谢了,之前不知道要加在之后

  • newnk
    newnk 2013-05-22 14:25

    :evil: 好用吗?我试试

  • 阿门
    阿门 2013-05-26 18:10

    博主 右面返回顶部怎么设置的 求代码

    • 吴文辉
      wwh 2013-05-26 19:38

      @阿门上面文章内容就能实现返回顶部功能的~ :smile:

  • 歪扑猫
    歪扑猫 2013-06-06 13:01

    真的很好用哦 :mrgreen:

  • 哎
    2014-07-22 00:03

    本来是学的,结果喜欢上了博主的主题。这可怎么好

  • xy
    xy 2014-09-11 17:32

    先评论用试用!

  • 崔小可
    崔小可 2014-12-06 10:21

    :mrgreen: 很灵活不错。。。

联系我们

在线咨询:点击这里给我发消息

站长邮箱:admin@wuwenhui.cn
工作时间:周一至周五,8:30-17:30,节假日休息

微信
本站支持QQ一键注册登录,所有资源下载均在文章底部~