今天去掉了很多插件,其中 FloatingMenu 、Dynamic To Top 也省了。
力求插件功能用代码去替代。
没有插件,返回顶部就得用代码。上网搜了一下,太复杂,下面是一个最简单的方法。
准备好三样东西:
1、一段要加入到主题footer.php内的代码
2、返回顶部的箭头图片,没有也没关系,可以用文字代替。
3、一个js脚本(代码)
首先是1,代码如下
<div id="full" style="position:fixed; right:40px; bottom:15px; text-align:center; cursor:pointer;"> <a><img src="//www.inlojv.com/top.png"></a> </div> <script src="//www.inlojv.com/gototop.js" type="text/javascript"></script>
将上面这段代码加入到主题模板里面的foot.php 中,打开foot.php,粘贴到 </body>之前即可。
其次是2,这个箭头图片可以自己做,也可以到网上搜,本站箭头是自己做的。
图片需要上传好获得链接地址,然后替换掉上面代码中的红色部分!
如果要使用文字,可以将<img …… > 这部分用你喜欢的文字替换掉 。
最后是3,新建一个txt文件,将下面的代码粘贴进去
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) };
然后保存,将txt文件重命名为 js文件。如:gototop.js ,
同时也将这个js文件上传好获得链接地址,替换掉第1部分代码中的蓝色部分即可。
到此 已经实现了返回顶部的功能。 如果要调整按钮的位置,可以在第1部分的代码 right= ?px bottom=?px 进行调整!
下面是一个实例,点击底部的
运行代码
查看演示
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/255.html