手把手教你如何给wordpress添加返回顶部按钮

今天有个网友给我留言,给了个意见让我给我的博客添加一个返回顶部的按钮,方便读者浏览页面。我立马动手操作百度起来,毕竟是用户提的需求意见,可以提高用户体验。费话不多说了下面就开始介绍如何添加返回顶部按钮。
首先编辑一段js脚本,保存为return_top.js,代码如下:

Code   ViewCopyPrint
  1. var isie6 = window.XMLHttpRequest ? false : true;
  2. function newtoponload()
  3. var c = document.getElementById("full");
  4. function b()
  5. var a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  6. if (a > 0) {
  7. if (isie6) { c.style.display = "none"; clearTimeout(window.show); window.show = setTimeout(function ()
  8. var d = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  9. if (d > 0) { c.style.display = "block"; c.style.top = (400 + d) + "px" } }, 300) }
  10. else { c.style.display = "block" } }
  11. else { c.style.display = "none" } }
  12. if (isie6) { c.style.position = "absolute" } window.onscroll = b; b() }
  13. if (window.attachEvent) { window.attachEvent("onload", newtoponload) }
  14. else { window.addEventListener("load", newtoponload, false) }
  15. document.getElementById("full").onclick = function () { window.scrollTo(0, 0) };


把这个js脚本放在你的主题的js文件夹下,以我的博客为例:http://www.datacentersky.com/wp-content/themes/xx主题/js/,把js放在这个文件夹下。
其次,在主题的footer.php文件的标签之后、标签之前的位置插入如下代码,并保存设置:

Code   ViewCopyPrint
  1. <div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px;  z-index:100; text-align:center; cursor:pointer;">
  2. <a><img src="http://www.datacentersky.com/wp-content/themes/xx主题/images/top.png" border=0 alt="返回顶部"></a>
  3. </div>
  4. <script src="http://www.datacentersky.com/wp-content/themes/xx主题/js/news_tops.js" type="text/javascript"></script>

最后,找一张返回顶部的图片,按这个路径http://www.datacentersky.com/wp-content/themes/xx主题/images/top.png把图片命名为top.png,并放在主题的images文件夹下。
这样你的博客上就添加了返回顶部的按钮了。就是如此简单,你也可以做到。

weinxin
DC Farm小程序二维码
扫一扫添加博客小程序
Jim

发表评论

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

目前评论:26   其中:访客  18   博主  7   引用   1

    • avatar 站长 5

      如果多了一个小工具,看样子你是硬件软件都懂 啊。

        • 激劉勇靖 激劉勇靖 Admin

          @站长 略懂略懂,是一个博友建议让我能不能添加一个返回顶部的按钮,既然有人提了,我就添加一下,呵呵,反正自己搞定的 我就不会用插件,就自己写代码去解决。

        • avatar 互联网战 2

          我也去加一个,嘿嘿

          • avatar 80后男人 0

            这个必须得支持一下,我也想要一个这东东

            • avatar clearsky 1

              这个有些用!

                • 激劉勇靖 激劉勇靖 Admin

                  @clearsky 希望我写的东西对大家都有用。大家不要觉得是费话我就开心。呵呵

                • avatar 匿名 5

                  这个学习啦,很实用的

                  • avatar 月光 5

                    谢谢楼主分享。

                    • avatar firedragonpzy 2

                      你这个是怎么实现的可否分享一下

                        • 激劉勇靖 激劉勇靖 Admin

                          @firedragonpzy 可以啊 没问题 需要时再M我。

                            • avatar firedragonpzy 2

                              @激劉勇靖 现在就需要啊 嘻嘻 如何联系

                              • avatar firedragonpzy 2

                                @激劉勇靖 http://firedragonpzy.d3.tuidc.com 这是目前实现的效果

                                  • 激劉勇靖 激劉勇靖 Admin

                                    @firedragonpzy 给个邮箱 我把代码 发给你。

                                    • 激劉勇靖 激劉勇靖 Admin

                                      @firedragonpzy 你是问邮件 发送的原理还是问 会提示这个邮件的原理 ???

                                        • avatar firedragonpzy 2

                                          @激劉勇靖 有人回复时邮件通知我 这个是什么原理 该如何使用?

                                        • 激劉勇靖 激劉勇靖 Admin

                                          @firedragonpzy 你在点击回复时文本框下会有 “有人回复时邮件通知我” 的选项,默认是勾选的。
                                          这个原理是:评论都会有输入邮箱地址,这样你的评论就会和你的邮箱地址关联,当你勾选了这个选项,那只要你的评论有回复,系统自动会调用你的邮箱地址,把回复内容发到你的邮箱。

                                            • avatar firedragonpzy 2

                                              @激劉勇靖
                                              我的这里根本就没有那个复选框啊 呼呼

                                      • avatar 神印王座 1

                                        很实用 收藏

                                        • avatar 杀神 1

                                          这个很有用的

                                          • avatar Christina 0

                                            强大!

                                          • 来自外部的引用: 1

                                            • 如何给wordpress添加返回顶部按钮 | Software MyZone