將JavaScript的jQuery庫(kù)中表單轉(zhuǎn)化為JSON對(duì)象的方法
963
2024-03-21
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)返回頂部效果的全部代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(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 class="gotop">TOP</a>
</div>
<script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 當(dāng)滾動(dòng)條滾動(dòng)大于200時(shí)出現(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>
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
