トップボタンのエクササイズ

CSS

        * { マージン0 ; パディング0 ;}
         / * 表示エリア* / 
        #content { 高さ4800px ; 800ピクセルは境界1ピクセル固体#333 ; マージン0自動 ; 位置相対 ; 背景URL( "。 ./img/1.jpg「) ;}
         / * ボタンの上部に戻る* / 
        #backTop { 位置絶対; -50px ; トップ500pxなど高さは50px ; 40ピクセル ; 国境1pxの固体#333 ; テキスト整列センター ; 行の高さは50px ; カーソルポインタ ; 表示なし ;}

HTML

    < DIV ID = "コンテンツ" > 
        < DIV ID = "backTop" >顶部</ DIV > 
    </ DIV >

ジャバスクリプト

    VAR backTop =のdocument.getElementById( 'backTop' );
     VARのscrollTimer;
     VARフラグに= trueに
    document.onscroll = 関数(){
         VAR scrollTopスプライト= document.documentElement.scrollTop || document.body.scrollTop; // 互換性のあるブラウザクロム 
        = + 500 + scrollTopスプライトbackTop.style.top 'PXを' ;
         IF(scrollTopスプライト<600 ){ 
            backTop.style.display = 'なし'; // 距離が上部のスクロールバー600未満である場合、ボタンは消滅せ 
        }  IF(scrollTopスプライト> = 600 ){ 
            backTop.style.display=「ブロック」; 
        } 
        // 可用性を向上させるためには、ホイール操作機能は、ユーザーがスクロールホイールの操作を持っている場合は、私たちはタイマーを停止しようとすることができますトリガされたときに戻って一番上のボタンに真ん中をトリガします。
        IF(!{旗で)
            てclearInterval(scrollTimer); 
        } 
        フラグに = falseに; 
    } 
    // 一番上のボタンの機能返し 
    backTop.onclick = 関数(){
         VAR scrollTopスプライト= document.documentElement.scrollTop || document.body.scrollTop;
         VAR =速度/ 10 scrollTopスプライト; // バックスクロールバーの上部に速度が上部からの距離の10分の1に設定されている、 
        scrollTimerはのsetInterval(= 関数 = scrollTopスプライトを-(){
            scrollTopスプライトスピード; 
            document.documentElement.scrollTop = document.body.scrollTop = scrollTopスプライト; //は背中の上部にページを作る
            IF(scrollTopスプライト<0 ){ 
                document.documentElement.scrollTop = 0 ; 
                てclearInterval(scrollTimer); // 上からスクロールバーの場合距離がゼロに0未満の集合であり、そしてタイマーを停止します。
            } 
            フラグに = trueに; 
        }、 20です
    }

 

おすすめ

転載: www.cnblogs.com/solaris-wwf/p/11750107.html
おすすめ