jquery實現(xiàn)頁面常用的返回頂部效果
更新時間：2016年03月04日 10:05:01 投稿：lijiao
這篇文章主要為大家詳細介紹了jquery實現(xiàn)頁面常用的返回頂部效果代碼，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)返回頂部效果的全部代碼，供大家參考，具體內(nèi)容如下
效果圖：
實現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回頂部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 當滾動條滾動大于200時出現(xiàn)，未大于，消失
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
},1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
},1000)
}
})
// 返回頂部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>
希望本文所述對大家學習javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
jQuery仿阿里云購買服務器選擇時間長度,操作簡單，只需點擊所要選的時間段，對實現(xiàn)代碼感興趣的朋友參考下2016-04-04
下面小編就為大家?guī)硪黄狫Q圖片文件上傳之前預覽功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
jQuery插件學習教程之SlidesJs輪播+Validation驗證
這篇文章主要介紹了jQuery插件學習教程之SlidesJs輪播+Validation驗證的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
如果文檔中某一個元素多余，那么應將其刪除。jQuery提供了兩種刪除節(jié)點的方法，remove()方法和empty()方法下面為大家詳細介紹下2014-01-01
jQuery實現(xiàn)點擊彈出背景變暗遮罩效果實例代碼
這篇文章主要介紹了jQuery實現(xiàn)點擊彈出背景變暗遮罩效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
只需將js引用并設置下變量就行了，但一直沒搞明白原理，這次弄清了如何傳遞、設置多個（很多個）參數(shù)，如果你也不明白可以看看2014-10-10
使用jQuery設置disabled屬性與移除disabled屬性
Readonly只針對input和textarea有效，而disabled對于所有的表單元素都有效，下面為大家介紹下使用jQuery設置disabled屬性2014-08-08
本篇文章主要介紹了jQuery Ajax前后端使用JSON進行交互示例，實現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進行處理，后端返回一個json給前端，有興趣的可以了解一下。2017-03-03
jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數(shù)進行實時數(shù)學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01