使用jQuery實現(xiàn)返回頂部
更新時間:2015年01月26日 09:26:48 投稿:hebedich
博客園是程序員們比較喜歡的聚集地,很多人喜歡發(fā)發(fā)心得,一直都覺著挺好的,但最不滿意他的一點是,沒有返回到頂部的功能,好吧,我們自己來添。
使用jQuery實現(xiàn)。所用圖片:
1、嘗試滾動 此頁面到底部即可出現(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;
}
試試看,是不是有了返回頂部了,非常方便實用的功能,希望大家能夠喜歡。
相關(guān)文章
基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話,如果一次把所有的圖片都加載出來的話,這勢必會影響網(wǎng)站的加載速度,給用戶帶來比較差的體驗。2011-05-05基于jquery實現(xiàn)一張圖片點擊鼠標(biāo)放大再點縮小
一張圖片點擊鼠標(biāo)放大,再點縮小基于jquery1.8.3實現(xiàn),下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09jquery ajax對特殊字符進(jìn)行轉(zhuǎn)義防止js注入使用示例
如果有人在留言里寫入了js語句,這結(jié)語句都會被執(zhí)行.解決辦法就是對這些特殊字符進(jìn)行轉(zhuǎn)義再顯示出來,下面有個不錯的示例,感興趣的朋友可以參考下2013-11-11