使用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定義：

<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í)用的功能，希望大家能夠喜歡。

您可能感興趣的文章:

相關(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
10條建議幫助你創(chuàng)建更好的jQuery插件
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設(shè)計(jì)中常用的技巧,需要的朋友可以參考下
2015-05-05
jQuery學(xué)習(xí)3：操作元素屬性和特性
今天主要總結(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
jquery 仿QQ校友的DIV模擬窗口效果源碼
本文使用大名頂頂?shù)膉query來(lái)實(shí)現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗(yàn)一些都是非常棒的
2010-03-03
15個(gè)常用的jquery代碼片段
這篇文章主要介紹了15個(gè)常用的jquery代碼片段，對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助,需要的朋友可以參考下
2015-12-12
基于JQuery的抓取博客園首頁(yè)RSS的代碼
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)彈幕效果
本文主要分享了jQuery實(shí)現(xiàn)彈幕效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02