动态样式返回顶部按钮添加教程

教程 4年前 (2014-03-01) 21,623 人围观 21


个人认为,一个网站要有返回顶部按钮~
最起码在我看来,这是必须的~一个没有返回顶部按钮的网站在用户体验上是有欠缺的。
貌似网上添加返回顶部按钮的教程也有很多~~
但是呢,今天要分享的是仿人人网的动态样式返回顶部按钮
废话不多说,下面开始吧。(弱弱的说一下,这是知言的代码,我也就大言不惭的拿来分享了~)
当然,这个主要是添加代码,因为本人不提倡使用插件。
找到主题的 footer.php 文件,在</body>之前添加以下代码:

<!-- BACK-TO-TOP --><a><div id="backtotop"></div></a><script type="text/javascript">var isie6 = window.XMLHttpRequest ? false : true; function newtoponload() { var c = document.getElementById("backtotop"); 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("backtotop").onclick = function () { window.scrollTo(0, 0) };</script><!-- BACK-TO-TOP END -->

第二步,当然就是修改CSS文件了
找到 style.css ,在末尾添加以下代码:

#backtotop{ height:50px; width:50px; border-radius:4px; float:left; display:block; background:#666 url(images/backtotop.png) no-repeat 0 -50px; position:fixed; zoom:1; z-index:1001; bottom:35px; right:56px; cursor:pointer;}#backtotop:hover{ background:#333 url(images/backtotop.png) no-repeat 0 0;}

代码加完了,那下面就要开始放置对应图片去相应文件夹了~

这个图片上面是带有“返回顶部”四个字的,但是其他部分多为透明所以看不到全貌,请直接另存为图片,放置到主题目录下的 images 文件夹下,保证实际路径和上述代码中一致即可。

该方法使用的是 javascript 的 scroll 函数,建立了一个带超链接的 div 容器在一定位置,通过 css 控制 div 容器的背景图片实现了鼠标悬停提示效果。