トップへ戻るボタン

Web

2021年8月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はページ内リンクのスムーススクロールを使った「トップへ戻るボタン」を実装してみます。

① jQuery本体を読み込む

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

これはCDN（Content Delivery Network）といって、ソースファイルをネット経由で利用する方法です。

② HTMLでボタンを設置

<a href="#" id="page-top">TOP</a>

href属性に#のみを指定するとそのページの一番上にジャンプします。

今回は「page-top」というIDを指定しています。

③ CSSでボタンをデザイン

#page-top {
  position: fixed;
  right: 12px;
  bottom: -60px;
  height: 50px;
  text-decoration: none;
  font-weight: 700;
  transform: rotate(90deg);
  font-size: 11px;
  line-height: 1.5rem;
  color: #000;
  padding: 0 0 0 35px;
  border-top: solid 2px;
}

#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0px;
  width: 15px;
  border-top: solid 2px;
  transform: rotate(35deg);
  transform-origin: left top;
}

参考：フジブロっ！｜HTMLとCSSのみで作るトップへ戻るボタン

スマホ時の左上のハンバーガーメニューと合わせたかったので、文字の大きさを11px、線の太さを2pxにしました。

初期状態では表示されないように、bottomを -60pxにしておきます。

TOP

④ jQueryでボタンの動きを設定

jQuery(function () {
  var appear = false;
  var pagetop = $('#page-top');
$(window).scroll(function () {
  if ($(this).scrollTop() > 100) { 
  if (appear == false) {
    appear = true;
    pagetop.stop().animate({
    'bottom': '60px' 
    }, 300); 
  }
  } else {
  if (appear) {
    appear = false;
    pagetop.stop().animate({
    'bottom': '-60px' 
    }, 150); 
  }
  }
 });
   
pagetop.click(function () {
$('body, html').animate({
  scrollTop: 0
}, 500); 
return false;
});
});

参考：コトダマウェブ｜スクロールすると出てくる「トップへ戻る」ボタンの作り方

最初はボタンは隠れていて、画面を下に100pxスクロールすると下から現れます。
ページの最上部に戻るとまた隠れます。