有些網(wǎng)頁由于特別長，需要三四屏才能顯示完全，當(dāng)用戶瀏覽到網(wǎng)頁底部需要返回網(wǎng)頁頂部時(shí)，要進(jìn)行不斷地滾動(dòng)才能到達(dá)頂部。為了方便用戶快速返回頂部網(wǎng)頁，就需要設(shè)置一個(gè)“返回頂部”的按鈕。在天水網(wǎng)站建設(shè)(士人網(wǎng)絡(luò))就為大家分享一個(gè)非常簡單的“返回頂部”的html+js代碼。

　　首先，在網(wǎng)頁body標(biāo)簽之前插入一個(gè)DIV標(biāo)簽，用于放置“返回頂部”的一張圖片。代碼可以如下：

<p><a data-cke-saved-href="javascript：window.scrollTo(0,0);" href="javascript：window.scrollTo(0,0);" _href="javascript：window.scrollTo(0,0);"><img data-cke-saved-src="zhiding.png" src="zhiding.png" alt="返回頂部" _src="zhiding.png"/></a></p>

　　其次，給這個(gè)DIV標(biāo)簽設(shè)置CSS樣式屬性，代碼如下：

#zhiding{position:fixed; right:10px; bottom:55px;display:none;width:60px;height:60px;z-index:999; } #zhiding img{width:60px;}

　　最后，插入如下js代碼：

<script type="text/javascript">

$(function(){  

    $(window).scroll(function(){  

        var scroll_top=$(window).scrollTop();  

        console.log(scroll_top)  

        if(scroll_top>=500){  

            $("#zhiding").fadeIn();  

        }else{  

            $("#zhiding").fadeOut();  

        }  

    })  

})  

 </script>

　　說明：與此同時(shí)，還要引入jQuery的JavaScript框架。點(diǎn)擊這里可以下載整個(gè)代碼包!