Javascriptノート----Pageページの右下隅にトップボタンを置くことを実現します.

ブログを始めてみると、ブログ園の多くのブロ友のブログにはPageの右下にアイコンがあり、画面がどんなに伸びても右下に止まります.クリックしてからページを最上部に置く.後はDemoを書いてこの効果を実現したいです.
     一.アイコンの右下に固定します.
1.SSには4つのレイアウトが提供されています.ここでfixedは絶対位置決め要素を表しています.だから私達はfixedを使ってアイコンの固定を実現します.
　
absolute
絶対位置決めの要素を生成し、static位置決め以外の最初の親要素に対して位置決めします.元素の位置は「left」、「top」、「Right」及び「bottom」属性で規定されています.
fixed
絶対位置の要素を生成して、ブラウザウィンドウに対して位置決めします.元素の位置は「left」、「top」、「Right」及び「bottom」属性で規定されています.
relative
相対的に位置決めされた要素を生成し、その正常な位置に対して位置決めします.したがって、「left:20」は要素のLEFT位置に20ピクセルを追加します.
static
標準値定位がなくて、元素は正常な流れの中で現れます.(top、bottom、left、rightまたはz-indx声明を無視します.)
inheit
親要素からposition属性を継承すべき値を規定します.
        2.所定のコードは以下の通りです.Buttonボタンは常に画面の右下に配置されます.上下の精度バーをドラッグしても、ブラウザウィンドウのサイズを伸ばしてもかまいません.

#FourLeafCloverZCTopBtn{
        bottom: 5px;
        right: 5px;
        position:fixed;
    }

      二.クリックを実現したら、ページの一番上の隅に戻ります.          1.スクリーンの一番上に戻るには、JavaScriptを使ってドラッグバーの上下移動を操作する方法をよく知らなければなりません.JavaScriptはscrollbyとscrollの方法を提供します.

window.scrollBy(0,-30)  //    30   
window.scroll(0,0) //        

          2.上記ではドラッグバーの移動方法について言及しましたが、どのように一定の速度でページの上部に移動することができますか?set Intervalとclear Intervalの方法を利用して、10ミリ秒のスクリーンを30ピクセルポイント上に移動させないことを実現します. 

<button id="FourLeafCloverZCTopBtn" onclick="FourLeafCloverZCTopFunc()">TOP</button>

 
　

<script type="text/javascript">
     var FourLeafCloverZCVar;

    function FourLeafCloverZCTopFunc(){
        FourLeafCloverZCVar=setInterval(FourLeafCloverZCEachScrollBy,10);    
    }

    function FourLeafCloverZCEachScrollBy(eachHeight){
        if(document.documentElement && document.documentElement.scrollTop)  //IE
        {
            if(document.documentElement.scrollTop<=0){
                clearInterval(FourLeafCloverZCVar);
            }else{
                window.scrollBy(0,-30);
            }
        }else{          //Chrome   documentElement.scrollTop
            if(document.body.scrollTop<=0){
                clearInterval(FourLeafCloverZCVar);
            }else{
                window.scrollBy(0,-30);
            }
        }
    }
 </script>

 
        三.拡張             セットトップボタンを実現しました.どのようにボタンを押してスクリーンを底に置くかを実現します.原理は大体同じです.ここでデモを書きません.みなさんにいくつかの属性を提供して参考にします.
      ページの可視領域の幅:Dcument.body.clientWidthページの可視領域の高さ:document.body.clientHeightページの可視領域の幅:document.body.offset Widthページの可視領域の高さ:document.body.offset Height(境界線の幅を含む)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは巻かれています.左:document.body.scrollLeftページの本文部分上:windowowowows.screendows.screendows.screendows.creen.height画面解像度の幅:window.screen.widthスクリーン利用可能ワークエリアの高さ:window.screen.availHeight画面利用可能ワークエリアの幅:window.screen.avail Width
        四.デモ  http://files.cnblogs.com/files/FourLeafCloverZc/%E5%AF%BC%E8%88%AA.zip