無(wú)插件純JS+CSS實(shí)現(xiàn)網(wǎng)站返回頂部按鈕發(fā)布者：本站     時(shí)間：2020-05-16 09:05:33

當(dāng)用戶(hù)在查看你的一篇比較長(zhǎng)的文章之后，如果你沒(méi)有返回頂部按鈕，這對(duì)需要返回頂部是非常麻煩的，因此前幾天給自己的博客添加了百度分享按鈕的時(shí)候順便把返回頂部功能也做好了。在實(shí)現(xiàn)這一功能之前，我在網(wǎng)上查了一下，有很多介紹說(shuō)是插件，這是我個(gè)人是比較反感的，因?yàn)椴寮枚嗔瞬粌H會(huì)影響網(wǎng)站加載速度，而且網(wǎng)站程序升級(jí)之后還有可能出現(xiàn)兼容性問(wèn)題，所以我沒(méi)有選擇插件，而是用JS+CSS的方法實(shí)現(xiàn)的。

在前面的一篇文章：“如何為自己的網(wǎng)站添加百度分享按鈕”中已經(jīng)講到過(guò)如何添加分享按鈕，今天就來(lái)說(shuō)一下用JS+CSS如何實(shí)現(xiàn)網(wǎng)站返回頂部功能。

第一步，需要準(zhǔn)備一張圖片，準(zhǔn)確的說(shuō)是顯示返回頂部的圖標(biāo)，這種圖標(biāo)網(wǎng)上非常多，可以自己百度一下，當(dāng)然如果你PS技術(shù)夠好的話(huà)，你也可以自己制作一個(gè)。

第二步，編寫(xiě)代碼，包括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>

第三步，將這兩段代碼添加到網(wǎng)站底部文件的</html>之前，然后保存刷新一下頁(yè)面即可生效。

如果你覺(jué)得這種方法還可以，想把它用到你的網(wǎng)站上的話(huà)，你只需要將以上代碼稍作修改：第一個(gè)將圖標(biāo)存儲(chǔ)的位置改為你自己存放的目錄，第二個(gè)是圖標(biāo)顯示的位置改為你想放的顯示的位置就可。如還有疑問(wèn)可以聯(lián)系博主。