HPで使える　ページ最上部に移動するボタンを作成する。

こんなのです。

方法

ご自身でお好みのアイコンを使いましょう。
fontawesome.com

<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>

htmlはこんな感じ

/* PAGE_TOP_BTN */

#pageTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
  }
  #pageTop i {
    padding-top: 7px;
  }
  #pageTop a {
    display: block;
    padding: 8px;
    border-radius: 30px;
    width: 50px;
    height: 50px;
    background-color: #33691e;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  #pageTop a:hover {
    text-decoration: none;
    opacity: 0.7;
  }

  #pageTop:active{
    transform: scale(0.8,0.8);
  }

見た目を整えて、位置を右下に固定します。

document.addEventListener('DOMContentLoaded',function(){
  
//page topボタン

//ボタンを消す
  $(function(){
  var topBtn=$('#pageTop');
  topBtn.hide();

//80px以上スクロールされたらボタンを表示
  $(window).scroll(function(){
    if($(this).scrollTop()>80){
      topBtn.fadeIn();
    }else{
      topBtn.fadeOut();
    }
  });

//ボタンが押されたらページ最上部に移動
  topBtn.click(function(){
   $('body,html').animate({
   scrollTop: 0},500);
   return false;
  });

  });
},false);