仿CSDN Blog返回頁(yè)面頂部功能實(shí)現(xiàn)原理及代碼

    仿CSDN Blog返回頁(yè)面頂部功能只修改了2個(gè)地方：返回的速度-->改成了慢慢回去，返回頂部圖標(biāo)出現(xiàn)的時(shí)機(jī)-->改成了只要不在頂部就顯示出來(lái)，具體代碼如下，感興趣的朋友可以參考下
    只修改了2個(gè)地方：
    ，返回的速度-->改成了慢慢回去。（原來(lái)是一閃而返回）
    ，返回頂部圖標(biāo)出現(xiàn)的時(shí)機(jī)-->改成了只要不在頂部就顯示出來(lái)。（原來(lái)是向下滾動(dòng)500px后才顯示）
    注意：JS務(wù)必要寫(xiě)在 Html之后；
    HTML
    代碼如下:
    <div id="d-top">
    <a id="d-top-a" href="#">
    <img src="http://pic02.newdu.com/uploads/202504/02/top3253.png" /></a>
    </div>
    Javascript代碼
    代碼如下:
    <script type="text/javascript">
    $(function(){
    var d_top=$('#d-top');
    document.onscroll=function(){
    var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
    if(scrTop>500){
    if(scrTop>0){
    d_top.show();
    }else{
    d_top.hide();
    }
    }
    $('#d-top-a').click(function(){
    $("html,body").animate({scrollTop: 0},500);
    //scrollTo(0,0);
    this.blur();
    return false;
    });
    });
    </script>
    CSS樣式
    代碼如下:
    #d-top {
    position: fixed;
    float: right;
    z-index: 10;
    right: 10px;
    bottom: 40px;
    }
    #d-top img {
    width: 42px;
    opacity: 0.3;
    }
    img {
    border: medium none;
    }