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