使用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的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]](http://img.jbzj.com/images/xgimg/bcimg0.png)
基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]
當網(wǎng)站上有大量圖片要展示的話，如果一次把所有的圖片都加載出來的話，這勢必會影響網(wǎng)站的加載速度，給用戶帶來比較差的體驗。2011-05-05
基于jquery實現(xiàn)一張圖片點擊鼠標放大再點縮小
一張圖片點擊鼠標放大，再點縮小基于jquery1.8.3實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
AJAX的跨域與JSONP(另送一個為文章自動添加短址的功能)2010-01-01
如果在iframe中使用則彈不出對話框，而有時候我們還必須得使用iframe而不能用jQuery的load方式，下面有個不錯的處理方法，希望對大家有所幫助2014-01-01
jquery 最簡單的屬性菜單實現(xiàn)代碼，推薦大家看下。2009-10-10
這篇文章主要介紹了jQuery晃動層特效實現(xiàn)方法,實例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery ajax對特殊字符進行轉義防止js注入使用示例
如果有人在留言里寫入了js語句,這結語句都會被執(zhí)行.解決辦法就是對這些特殊字符進行轉義再顯示出來，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
在工程中導入jquery-1.7.1之后一直有一個紅叉叉，雖然不會影響程序功能，但是看著非常不舒服，下面有個不錯的解決方法，大家可以嘗試下2014-04-04
項目遇到一個消息的模塊,在導航條最上面.想實現(xiàn),當收到消息的時候能夠及時的刷新,顯示收到消息的條數(shù)，下面為大家介紹兩種不錯的方法，感興趣的朋友可以參考下2014-01-01
下拉菜單是網(wǎng)站導航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導航內(nèi)容。如果網(wǎng)站能夠設計出有吸引力的網(wǎng)站導航，將會吸引更多的用戶去瀏覽網(wǎng)站的內(nèi)容2012-06-06