js返回網(wǎng)頁頂部代碼分享
時間:2018-06-11 | 來源:士人網(wǎng)絡(luò) | 關(guān)注: 288 次
有些網(wǎng)頁由于特別長,需要三四屏才能顯示完全,當用戶瀏覽到網(wǎng)頁底部需要返回網(wǎng)頁頂部時,要進行不斷地滾動才能到達頂部。為了方便用戶快速返回頂部網(wǎng)頁,就需要設(shè)置一個“返回頂部”的按鈕。在天水網(wǎng)站建設(shè)(士人網(wǎng)絡(luò))就為大家分享一個非常簡單的“返回頂部”的html+js代碼。
首先,在網(wǎng)頁body標簽之前插入一個DIV標簽,用于放置“返回頂部”的一張圖片。代碼可以如下:
其次,給這個DIV標簽設(shè)置CSS樣式屬性,代碼如下:
最后,插入如下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>
說明:與此同時,還要引入jQuery的JavaScript框架。點擊這里可以下載整個代碼包!
相關(guān)熱詞搜索: js,返回網(wǎng)頁頂部,代碼,分享