Suzuki Blog Written by Yuki Suzuki

スムーススクロールとフローティングアイテムの実装方法【jQuery】

jQuery Programming

こんにちは!スズキです。

今回はスムーススクロールとフローティングアイテムの実装方法を紹介します。

スムーススクロールとは、ページ内をするすると移動する動きのことです。

フローティングアイテムとは、ふわっと表示される要素のことです。

この2つを使えば、「トップへ戻るボタン」を作ることができます。

この記事では、「トップへ戻るボタン」と「ページ内リンクボタン」を作ります。

記事の内容

  • jQueryの読み込み
  • コーディング

スポンサードサーチ

jQueryの読み込み

まずは、jQueryの読み込みをしておきます。

以下のコードをコピペしてください。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

読み込みができたら、CSSファイルとjsファイルも準備しておきましょう。

コーディング

まずはサンプルを確認してください。

HTML

<!-- ページ内リンクボタン -->
  <div class="btn-items">
    <a href="#test1" class="btn">test1へ移動</a>
    <a href="#test2" class="btn">test2へ移動</a>
    <a href="#test3" class="btn">test3へ移動</a>
  </div>

  <!-- トップへ戻るボタン(フローティングボタン) -->
  <div class="floating">
    <a href="" class="btn">トップへ移動</a>
  </div>

  <!-- リンク先 -->
  <div id="test1">
    <h2>test1</h2>
  </div>
  <div id="test2">
    <h2>test2</h2>
  </div>
  <div id="test3">
    <h2>test3</h2>
  </div>

まずは、HTMLです。

リンク先にidを設定しましょう。

そして、リンク元ボタンのhrefにリンク先のidを設定します。

この時、”#”をつけるのを忘れないようにしましょう。

CSS

特に設定することはありません。

ボタンのスタイルを作りましょう。

jQuery

最後にjQueryです。

まずは、ページ内リンクボタンを見てみましょう。

// ページ内リンクボタン
$(function(){
  // #で始まるリンクをクリックしたら実行
  $('a[href^="#"]').click(function() {
    // スクロールの速度
    var speed = 500; // ミリ秒で記述
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先の取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を数値で取得
    var position = target.offset().top;
    // ここでスムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

詳しくはコメントの通りです。

簡単に流れを説明すると、まずスクロールの速度とリンク先までの距離を設定、取得します。

それらを、animate()に引数として渡すことで、スムーススクロールを実装しています。

次にフローティングボタンです。

// フローティングボタン
$(function(){
  // ボタンを表示するタイミング
  $(window).on("scroll", function(){
    if ($(this).scrollTop() > 100) { /* 100以上スクロールされた時 */
      $(".floating").fadeIn("fast"); /* 表示 */
    } else {
      $(".floating").fadeOut("fast"); /* 非表示 */
    }
  });

  // ここでスムーススクロール
  $(".floating").click(function(){
    $('body,html').animate({
      scrollTop: 0 /* 一番上まで移動 */
    }, 500, 'swing');
    return false;
  });
});

こちらもコメントの通りです。

if文でボタンを表示するタイミングを設定し、fadeInとfadeOutで表示・非表示を切り替えています。

スムーススクロールは先ほどと同じです。

scrollTopを0にすることで、一番上まで移動します。

スポンサードサーチ

まとめ

いかがでしたか。

ライブラリを使わなくても、「トップへ戻るボタン」「ページ内リンクボタン」を実装することができました。

コピペでも使えますので、試してみてください。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks