「ページ先頭へ」ボタンの自動作成

右下の「ページ先頭へ」ボタンを簡単に作成することが出来ます。
当ページで作成される「ページ先頭へ」ボタンは、初めと終わりが早いゆっくりスクロールとなります。

色や位置、大きさなど様々な「ページ先頭へ」ボタンを自動生成できます。
ページの先頭が表示されて場合はボタンを表示しないこともできます。

<div id="topScroll" class="topIcon" onclick="goTop()">Top</div>

<style type="text/css">
#topIcon {
  display       : inline-block;
  position      : fixed;       /* ボタン固定 */
  bottom        : 20px;        /* 下から位置 */
  right         : 20px;        /* 右から位置 */
  padding       : 25px 25px;   /* 余白       */
  background    : #00007f;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  opacity       : 0.5;         /* 透明度     */
  border-radius : 50%;         /* 角丸       */
  font-size     : 20pt;        /* 文字サイズ */
  font-weight   : bold;        /* 太字       */
  line-height   : 1.2em;       /* 行の高さ   */
  letter-spacing: 2px;         /* 文字間隔   */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  z-index       : 999;         /* 重ね順位   */
}
#topIcon:hover {
  opacity       : 0.9;   /* カーソル時透明度 */
}
</style>

<script type="text/javascript">
var vGoTop = {};
function goTop(){
    vGoTop["coef"] = 50;        // ←滑らか係数（大きいほど滑らか）
    vGoTop["cnt"]  = 0;
    // --- 現在のスクロール位置取得 -----
    var startX = document.body.scrollLeft || document.documentElement.scrollLeft;
    var startY = document.body.scrollTop  || document.documentElement.scrollTop;
    // --- スクロールの単位計算 ---------
    var moveSplitCnt = 0;
    for(var i = 1; i <= vGoTop["coef"]; i++) {
        moveSplitCnt += i * i;
    }
    vGoTop["unitH"] = startY / ( moveSplitCnt * 2 );
    vGoTop["nextX"] = startX;
    vGoTop["nextY"] = startY;
    // --- スクロール開始 ---------------
    goTopLoop();
}
function goTopLoop(){
    vGoTop["cnt"]++;
    // --- 次のスクロール位置計算 -------
    var Coef = 0;
    if(vGoTop["cnt"] <= vGoTop["coef"]){
        Coef = vGoTop["cnt"];
    }else{
        Coef = ((vGoTop["coef"] * 2) + 1) - vGoTop["cnt"];
    }
    vGoTop["nextY"] = vGoTop["nextY"] - Math.round( vGoTop["unitH"] * ( Coef * Coef) );
    if((vGoTop["cnt"] >= (vGoTop["coef"] * 2))||(vGoTop["nextY"] <= 0)){
        vGoTop["nextY"] = 0;
    }
    // --- スクロール実行 ---------------
    window.scrollTo(vGoTop["nextX"], vGoTop["nextY"]);
    // --- 次のスクロールを設定 ---------
    if(vGoTop["nextY"] <= 0){
        clearTimeout(vGoTop["timer"]);                   // 終了：タイマクリア
    }else{
        vGoTop["timer"] = setTimeout("goTopLoop()",10);  // 次のループ
    }
}

</script>