无插件纯JS+CSS实现网站返回顶部按钮

当用户在查看你的一篇比较长的文章之后，如果你没有返回顶部按钮，这对需要返回顶部是非常麻烦的，因此前几天给自己的博客添加了百度分享按钮的时候顺便把返回顶部功能也做好了。在实现这一功能之前，我在网上查了一下，有很多介绍说是插件，这是我个人是比较反感的，因为插件用多了不仅会影响网站加载速度，而且网站程序升级之后还有可能出现兼容性问题，所以我没有选择插件，而是用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="http://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>之前，然后保存刷新一下页面即可生效。

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

专注于为中小企业提供成都网站建设、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业天心免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

网站题目：无插件纯JS+CSS实现网站返回顶部按钮
转载源于：https://www.cdcxhl.com/article28/eccscp.html

成都网站建设公司_创新互联，为您提供营销型网站建设、网页设计公司、响应式网站、虚拟主机、ChatGPT、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联