TOPへ戻るボタンをJavascriptとCSSで追加する

2017-01-08

TOP までスクロールする操作はめんどくさく，ユーザーエクスペリエンスの低下に繋がるかもしれないので，CSS と JavaScript を使って TOP に戻るボタンを追加しました．

HTML

<p id="page-top"><a href="#">Page Top</a></p>

これを </body> の直前辺りに追加します．

CSS

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 77%;
}
#page-top a {
  background: rgba(102, 102, 102, 0.8);
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
}
#page-top a:hover {
  text-decoration: none;
  background: rgba(144, 144, 144, 0.8);
}

背景色は少し透過させてみました．

スマホ上だとボタンが大きすぎて不自然な気がするので，条件分岐でスマホ専用の CSS も書きます．

@media screen and (max-width: 425px) {
  #page-top {
    position: fixed;
    bottom: 10px;
    right: 5px;
    font-size: 77%;
  }
  #page-top a {
    background: rgba(102, 102, 102, 0.8);
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
  }
}

JavaScript

$(function () {
  var topBtn = $("#page-top");
  topBtn.hide();
  //スクロールが600に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 600) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  //スクロールしてトップ
  topBtn.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      500
    );
    return false;
  });
});

参考サイトを基にほぼコピー．表示するタイミングは調整するといいです．

WordPress 上で動かないときの対策

実はこのまま書いても WordPress だと動きません．

他のライブラリとの衝突を避けるため，$ が使えないらしいです．

$ を jQuery に置き換えることで対応します．

jQuery(function () {
  var topBtn = jQuery("#page-top");
  topBtn.hide();
  //スクロールが600に達したらボタン表示
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 600) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  //スクロールしてトップ
  topBtn.click(function () {
    jQuery("body,html").animate(
      {
        scrollTop: 0,
      },
      500
    );
    return false;
  });
});

mktia's note

HTML

CSS

JavaScript

WordPress 上で動かないときの対策

参考