相容IE6的返回頂部代碼

來源:互聯網
上載者:User

JS代碼如下:
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" >< /script>
< script type = "text/javascript" >
backTop = function ( btnId ){
    var btn = document . getElementById( btnId);
    var d = document . documentElement;
    window . onscroll = set;
    btn . onclick = function (){
        btn . style . display = "none";
        window . onscroll = null;
        this . timer = setInterval( function (){
            d . scrollTop -= Math . ceil( d . scrollTop * 0.1);
            if( d . scrollTop == 0) clearInterval( btn . timer , window . onscroll = set);
        }, 10);
    };
    function set (){ btn . style . display = d . scrollTop ? 'block' : "none" }
};
backTop( 'gotopbtn');
< /script>

HTML代碼更是簡單:

<div id="gotopbtn">返回頂部</div>

其他就是CSS來渲染了,看CSS代碼:
< style type = "text/css" >
#gotopbtn { width : 20px; height : 50px; line-height : 999px; overflow : hidden; background : url(images/scrolltop.png) no-repeat 50 % 0; position : fixed; _ position : absolute; bottom : 100px; left : 50 %; margin-left : 440px; display : none; cursor : pointer }
</ style >
<! -- [ if lt IE 6 ]>
< style type = "text/css" >
html { _ text - overflow : ellipsis }
#gotopbtn { _ position : absolute; _ top : expression( eval( document . documentElement . scrollTop + 400 ))}
</ style >
<![ endif ] -- >

if lt IE 6就是原來判斷IE6下的顯示的,詳細的判斷規則可以看這裡

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.