使用jQuery實現(xiàn)返回頂部
更新時間：2015年01月26日 09:26:48 投稿：hebedich
博客園是程序員們比較喜歡的聚集地，很多人喜歡發(fā)發(fā)心得，一直都覺著挺好的，但最不滿意他的一點是，沒有返回到頂部的功能，好吧，我們自己來添。
使用jQuery實現(xiàn)。所用圖片：
1、嘗試滾動 此頁面到底部即可出現(xiàn)go2top按鈕。
2、go2top-inner暫未使用。
HTML&JS定義：
復制代碼 代碼如下:
<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定義
復制代碼 代碼如下:
.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;
}
試試看，是不是有了返回頂部了，非常方便實用的功能，希望大家能夠喜歡。
相關文章
jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結合實例形式較為詳細分析了jQuery結合ajax進行表單登陸驗證操作的具體步驟與相關操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設計中常用的技巧,需要的朋友可以參考下2015-05-05
今天主要總結一下jQuery操作元素屬性的一些知識，學習jquery的朋友可以參考下2010-02-02
jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實現(xiàn)圖片上傳+裁剪+預覽的代碼，非常的簡單實用，效果也很棒，有需要的小伙伴可以參考下。2015-04-04
本文使用大名頂頂?shù)膉query來實現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗一些都是非常棒的2010-03-03
這篇文章主要介紹了15個常用的jquery代碼片段，對大家學習jquery程序設計有所幫助,需要的朋友可以參考下2015-12-12
JQuery 抓取博客園首頁RSS直接將代碼保存到文本文檔，更改后綴名為html瀏覽 即可查看效果2011-12-12
jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。本文主要對表單驗證插件-Validation進行案例分析，詳細介紹，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
本文給大家分享一款jquery實現(xiàn)的完美拖拽(拖動div層效果)，如果你正在找這類效果不妨進入?yún)⒖家幌隆?/div> 2015-06-06
本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02最新評論