使用jQuery實(shí)現(xiàn)返回頂部
更新時(shí)間：2015年01月26日 09:26:48 投稿：hebedich
博客園是程序員們比較喜歡的聚集地，很多人喜歡發(fā)發(fā)心得，一直都覺著挺好的，但最不滿意他的一點(diǎn)是，沒有返回到頂部的功能，好吧，我們自己來(lái)添。
使用jQuery實(shí)現(xiàn)。所用圖片：
1、嘗試滾動(dòng) 此頁(yè)面到底部即可出現(xiàn)go2top按鈕。
2、go2top-inner暫未使用。
HTML&JS定義：
復(fù)制代碼 代碼如下:
<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>
<script type="text/javascript">
$(function(){
$('#go2top').click(function(){
$("html,body").animate({scrollTop:0},200);
return false;
});
$(window).scroll(function(){
var obj=$('#go2top');
if(obj.offset().top>900){
obj.show();
}else{
obj.hide();
}
});
});
</script>
CSS定義
復(fù)制代碼 代碼如下:
.go2top {
background: url(" bottom: 65px;
color: #444444;
display: none;
height: 50px;
margin-left: 510px;
position: fixed;
right: 160px;
text-align: center;
width: 50px;
}
.go2top:hover {
background-position: -50px top;
}
試試看，是不是有了返回頂部了，非常方便實(shí)用的功能，希望大家能夠喜歡。
您可能感興趣的文章:
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- 基于jquery的返回頂部效果（兼容IE6）
- JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome)
- 仿新浪微博返回頂部的jquery實(shí)現(xiàn)代碼
- jQuery中頁(yè)面返回頂部的方法總結(jié)
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
- jQuery實(shí)現(xiàn)小火箭返回頂部特效
相關(guān)文章
jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設(shè)計(jì)中常用的技巧,需要的朋友可以參考下2015-05-05
今天主要總結(jié)一下jQuery操作元素屬性的一些知識(shí)，學(xué)習(xí)jquery的朋友可以參考下2010-02-02
jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼，非常的簡(jiǎn)單實(shí)用，效果也很棒，有需要的小伙伴可以參考下。2015-04-04
本文使用大名頂頂?shù)膉query來(lái)實(shí)現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗(yàn)一些都是非常棒的2010-03-03
這篇文章主要介紹了15個(gè)常用的jquery代碼片段，對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助,需要的朋友可以參考下2015-12-12
JQuery 抓取博客園首頁(yè)RSS直接將代碼保存到文本文檔，更改后綴名為html瀏覽 即可查看效果2011-12-12
詳解jQuery的表單驗(yàn)證插件--Validation
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。本文主要對(duì)表單驗(yàn)證插件-Validation進(jìn)行案例分析，詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
本文給大家分享一款jquery實(shí)現(xiàn)的完美拖拽(拖動(dòng)div層效果)，如果你正在找這類效果不妨進(jìn)入?yún)⒖家幌隆?/div> 2015-06-06
本文主要分享了jQuery實(shí)現(xiàn)彈幕效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02最新評(píng)論