无插件纯JS+CSS实现网站返回顶部按钮发布者：本站     时间：2020-05-16 09:05:33

当用户在查看你的一篇比较长的文章之后，如果你没有返回顶部按钮，这对需要返回顶部是非常麻烦的，因此前几天给自己的博客添加了百度分享按钮的时候顺便把返回顶部功能也做好了。在实现这一功能之前，我在网上查了一下，有很多介绍说是插件，这是我个人是比较反感的，因为插件用多了不仅会影响网站加载速度，而且网站程序升级之后还有可能出现兼容性问题，所以我没有选择插件，而是用JS+CSS的方法实现的。

在前面的一篇文章：“如何为自己的网站添加百度分享按钮”中已经讲到过如何添加分享按钮，今天就来说一下用JS+CSS如何实现网站返回顶部功能。

第一步，需要准备一张图片，准确的说是显示返回顶部的图标，这种图标网上非常多，可以自己百度一下，当然如果你PS技术够好的话，你也可以自己制作一个。

第二步，编写代码，包括CSS+DIV代码和Javascript代码。我的代码如下：

CSS+DIV代码

<div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:520px; z-index:100; text-align:center; cursor:pointer;"><a><img src="//www.phpxx.info/wp-content/themes/ConcisePro/images/back-top.jpg" border=0 alt="返回顶部"></a> </div>

Javascript代码

<script type="text/javascript">

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

</script>

第三步，将这两段代码添加到网站底部文件的</html>之前，然后保存刷新一下页面即可生效。

如果你觉得这种方法还可以，想把它用到你的网站上的话，你只需要将以上代码稍作修改：第一个将图标存储的位置改为你自己存放的目录，第二个是图标显示的位置改为你想放的显示的位置就可。如还有疑问可以联系博主。