久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

無插件純JS+CSS實現網站返回頂部按鈕發(fā)布者：本站     時間：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="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>之前，然后保存刷新一下頁面即可生效。

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