當用戶在查看你的一篇比較長的文章之后，如果你沒有返回頂部按鈕，這對需要返回頂部是非常麻煩的，因此前幾天給自己的博客添加了百度分享按鈕的時候順便把返回頂部功能也做好了。在實現(xiàn)這一功能之前，我在網(wǎng)上查了一下，有很多介紹說是插件，這是我個人是比較反感的，因為插件用多了不僅會影響網(wǎng)站加載速度，而且網(wǎng)站程序升級之后還有可能出現(xiàn)兼容性問題，所以我沒有選擇插件，而是用JS+CSS的方法實現(xiàn)的。

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

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

第二步，編寫代碼，包括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>之前，然后保存刷新一下頁面即可生效。

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

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)天心免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

網(wǎng)站題目：無插件純JS+CSS實現(xiàn)網(wǎng)站返回頂部按鈕
轉(zhuǎn)載源于：http://www.ekvhdxd.cn/article28/eccscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、響應式網(wǎng)站、虛擬主機、ChatGPT、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)