TOPに戻るボタン

2024年6月1日

スクロールする出てきて、クリックするとページのトップに戻る
「トップへ戻る」ボタンの記述です
まず、ボタンのデザインは以下の通りです。

それでは、HTML,CSS,JS を記述してみましょう

１）HTML

上矢印のアイコンをfontawesomeからとるため、fontawesomeを読み込みます

 <link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">

また、footer の直前に以下の記述をします

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

２）CSS

#pageTop {
  position: fixed;
  bottom: 30px;
  right: 20px;
}
#pageTop i {
  padding-top: 10px
}
#pageTop a {
  display: block;
  z-index: 999;
  width: 40px;
  height: 40px;
  background-color: #3F478E;
  color: #fff;
  border: solid 1px #000000;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

３）JS

$(function () {
  var topBtn = $('#pageTop');
  topBtn.hide();
  //◇ボタンの表示設定
  $(window).scroll(function () {
    if ($(this).scrollTop() > 80) {
      //---- 画面を80pxスクロールしたら、ボタンを表示する
      topBtn.fadeIn();
    } else {
      //---- 画面が80pxより上なら、ボタンを表示しない
      topBtn.fadeOut();
    }
  });
  // ◇ボタンをクリックしたら、スクロールして上に戻る
  topBtn.click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  }
  )
});

よかったらシェアしてね！