【自分用】"上に戻る"【メモ】

投稿日 2018/04/28   更新日  ブログ #Blogger

やっぱり、あると便利なので。
以下は自分用のメモ。

下記様を参考にさせていただきました。
-> デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） | Design Color

jQuery

<script>
$(function(){
  var pageTop = $(&quot;#pageTop&quot;);
  pageTop.click(function () {
    $(&#39;body, html&#39;).animate({ scrollTop: 0 }, 300);
    return false;
  });
  $(window).scroll(function () {
    if($(this).scrollTop() &gt;= 200) {
      pageTop.fadeIn();
    } else {
      pageTop.fadeOut();
    }
  });
});
</script>

CSS

PCでは右下に表示、モバイルでは一番下に固定で表示

/* モバイル */
#pageTop {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgba(21, 78, 103, 0.8);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
/* PC */
@media screen and (min-width: 768px) {
    #pageTop {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 30px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    font-size: 13px;
}
}

[PCで見たときの表示]

[モバイルで見たときの表示]

HTML

<a href='#' id='pageTop'>上に戻る</a>