jquery實(shí)現(xiàn)頁面常用的返回頂部效果
更新時(shí)間：2016年03月04日 10:05:01 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)頁面常用的返回頂部效果代碼，感興趣的小伙伴們可以參考一下
本文實(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 href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 當(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>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)返回頂部功能
- 基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
- jQuery實(shí)現(xiàn)的個性化返回底部與返回頂部特效代碼
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部效果的方法
- 使用jQuery實(shí)現(xiàn)返回頂部
- jquery 實(shí)現(xiàn)返回頂部功能
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動效果的返回頂部代碼
- 一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡單實(shí)用）
相關(guān)文章
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
jQuery模仿阿里云購買服務(wù)器選擇購買時(shí)間長度的代碼
jQuery仿阿里云購買服務(wù)器選擇時(shí)間長度,操作簡單，只需點(diǎn)擊所要選的時(shí)間段，對實(shí)現(xiàn)代碼感興趣的朋友參考下2016-04-04
JQ圖片文件上傳之前預(yù)覽功能的簡單實(shí)例(分享)
下面小編就為大家?guī)硪黄狫Q圖片文件上傳之前預(yù)覽功能的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證
這篇文章主要介紹了jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jQuery的DOM操作之刪除節(jié)點(diǎn)示例
如果文檔中某一個元素多余，那么應(yīng)將其刪除。jQuery提供了兩種刪除節(jié)點(diǎn)的方法，remove()方法和empty()方法下面為大家詳細(xì)介紹下2014-01-01
jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
只需將js引用并設(shè)置下變量就行了，但一直沒搞明白原理，這次弄清了如何傳遞、設(shè)置多個（很多個）參數(shù)，如果你也不明白可以看看2014-10-10
使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對input和textarea有效，而disabled對于所有的表單元素都有效，下面為大家介紹下使用jQuery設(shè)置disabled屬性2014-08-08
jQuery Ajax前后端使用JSON進(jìn)行交互示例
本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進(jìn)行處理，后端返回一個json給前端，有興趣的可以了解一下。2017-03-03
jQuery+canvas實(shí)現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時(shí)間函數(shù)進(jìn)行實(shí)時(shí)數(shù)學(xué)運(yùn)算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01