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です) }