ページトップへ戻るボタンの作成

スマホ＆PC＆TV
横から出てくるボタンの作成
アイコンフォントとして「Font Awesome」というサービスを利用。
 
***「HTML」***
head部分に下記コードを挿入
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/page_top.js"></script>
 
footer　の上部に下記コードを挿入
<div id="page_top"><a href="#"></a></div>


***「css」style.css　***
/*その他　の上部に下記コードを挿入
/*PAGE TOP設定
---------------------------------------------------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: -50px;
  bottom: 50px;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
 
上記コード中
background: #ef3f98;　←色番号
content: '\f102';　←アイコンのパターン
888.png
 
 
***「js」page_top.js***
「page_top.js」ファイルを作成
以下のコードを挿入
jQuery(function() {
  var appear = false;
  var pagetop = $('#page_top');
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
      if (appear == false) {
        appear = true;
        pagetop.stop().animate({
          'right': '0px' //右から0pxの位置に
        }, 300); //0.3秒かけて現れる
      }
    } else {
      if (appear) {
        appear = false;
        pagetop.stop().animate({
          'right': '-50px' //右から-50pxの位置に
        }, 300); //0.3秒かけて隠れる
      }
    }
  });
  pagetop.click(function () {
    $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
    return false;
  });
})