読者です 読者をやめる 読者になる 読者になる

ページのトップへスクロールするボタンを実装する

まずはデモ

http://workshops.ddns.net/albums/show_pictures/70#

以下に、コピペでそのまま使えるコードを貼ります

<style type="text/css">
   #topbutton {
      /* ▼表示位置を画面の右下に固定 */
      position: fixed; /* ←表示場所を固定 */
      bottom: 18px;   /* ←下端からの距離 */
      right: 18px;    /* ←右端からの距離 */
      width: 7em;     /* ←横幅 */

      /* ▼最初は非表示にしておく */
      display: none;

      /* ▼配色・配置・文字の装飾など */
      background-color: #2525aa; /* ←背景色 */
      opacity: 0.75;             /* ←透明度 */
      border-radius: 24px;       /* ←角丸の半径 */
      text-align: center;    /* ←文字の位置 */
      font-size: 120%;       /* ←文字サイズ */
      font-weight: bold;     /* ←文字の太さ */
      margin: 0px;    /* ←外側の余白 */
      padding: 10px;  /* ←内側の余白 */
   }
   #topbutton a {
      /* ▼リンクの装飾 */
      color: white;          /* ←文字色 */
      text-decoration: none; /* ←下線なし */
   }
   #topbutton a:hover {
      /* ▼マウスが載ったときの装飾 */
      color: yellow;              /* ←文字色 */
      text-decoration: underline; /* ←下線あり */
   }
</style>

<p id="topbutton">
   <a href="#top" onclick="$('html,body').animate({ scrollTop: 0 }); return false;">▲TOPへ戻る</a>
</p>

<script>
$(function() {
   // スクロールしたときに実行
   $(window).scroll(function () {
      // 目的のスクロール量を設定(px)
      var TargetPos = 350;
      // 現在のスクロール位置を取得
      var ScrollPos = $(window).scrollTop();
      // 現在位置が目的のスクロール量に達しているかどうかを判断
      if( ScrollPos >= TargetPos) {
         // 達していれば表示
         $("#topbutton").fadeIn();
      }
      else {
         // 達していなければ非表示
         $("#topbutton").fadeOut();
      }
   });
});
</script>

以上