Date-posted: 2020/11/25
Last-Modified: 2022/06/18

[jQuery]画面のトップに戻るボタンの実装(ライブラリ等使用なし)

プログラミング jQuery

はじめに

HTML, CSS, jQueryで画面の右下などによく見かける、画面のトップへ戻るボタンの実装を行う方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事では、ライブラリやBootstrap等は使用はせず、HTML, CSS, jQueryをゼロから記述する方法を記載しております。

開発環境

• HTML 5
• CSS 3
• jQuery 3.1.1

コード

<header id="#header"></header>
<div id="page_top">
  <a href="#header"><i class="fas fa-arrow-alt-circle-up"></i></a>
</div>

#page_top {
  font-size: 60px;
  position: fixed;
  bottom: 80px;
  right: 30px;
}

$(function() {
  var pageTop = $('#page_top');
  pageTop.hide();
    
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      pageTop.fadeIn(100);
    } else {
      pageTop.fadeOut(100);
    }
  });

  pageTop.click(function() {
    $('body, html').animate({
      scrollTop:0
    }, 300);
    return false;
  });
});

コードの説明

index.html

• 1行目
• headerにid属性を設定しておくことで、aリンクの飛び先の目印になる。

style.css

• 3行目
• position: fixed; を設定することで、画面をスクロールしたとしてもボタンが同じ場所(固定位置)に表示され続ける。
• bottom: 80px; , right: 30px; を設定することで、画面右下を基準とした位置から指定した場所にボタンを表示することができる。

top-btn.js

• 2行目
• id=”page_top” は何度も使用するため、変数に格納しておく。

• 3行目
• 初期状態はボタンを非表示にするため、hideメソッドを使用する。

• 5行目
• 画面をスクロールするとイベントが発火するように設定。

• 6行目
• 画面のトップから100px以上スクロールするとif文内のボタンが表示されるメソッドが実行される。

• 8行目
• else内の処理は画面のトップからスクロール位置が100px未満になると、else文内のボタンが非表示になるメソッドが実行される。

• 13〜17行目
• トップページへ戻るボタンをクリックすると、画面トップから0px(一番上)の位置に300ミリ秒(0.3秒)かけて戻る。

さいごに

今回は画面のトップに戻るボタンの実装方法を、理解整理の目的で学習し記事にしました。意味が理解できている方は、ライブラリ等を使用したほうが効率が良いと思いますので、あくまで参考としてご活用していただけると幸いです。

• facebook
• Tweet