Help us understand the problem. What is going on with this article?

【jQuery】「トップへ戻る」ボタンとページ内リンクを実装

More than 1 year has passed since last update.

実装内容

  1. ある程度スクロールされたら、「トップへ戻る」ボタンを徐々に表示させる
  2. 「トップへ戻る」ボタンをクリックしたら、ページの先頭へ戻る
  3. 「test_noへ移動」ボタンをクリックしたら、「test_no」の要素へ移動する

参考記事

今回もロジックはそのままです;
お世話になりました!

jQuery とっても簡単、ページ内リンクでスムーズスクロール

[jQuery]スルスルっとトップへ戻るボタンを設置しよう

HTML

scroll_button.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>scroll_button</title>
  <!-- stylesheet.cssの読み込み -->
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <!-- jqueryの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <button type=button class="move-to-test">
    <a href="#no_10">test10へ移動</a>
  </button>
  <div class="text" id="no_1">test1</div>
  <div class="text" id="no_2">test2</div>
  <div class="text" id="no_3">test3</div>
  <div class="text" id="no_4">test4</div>
  <div class="text" id="no_5">test5</div>
  <div class="text" id="no_6">test6</div>
  <div class="text" id="no_7">test7</div>
  <div class="text" id="no_8">test8</div>
  <div class="text" id="no_9">test9</div>
  <div class="text" id="no_10">test10</div>
  <button type=button class="move-to-test">
    <a href="#no_20">test20へ移動</a>
  </button>
  <div class="text" id="no_11">test11</div>
  <div class="text" id="no_12">test12</div>
  <div class="text" id="no_13">test13</div>
  <div class="text" id="no_14">test14</div>
  <div class="text" id="no_15">test15</div>
  <div class="text" id="no_16">test16</div>
  <div class="text" id="no_17">test17</div>
  <div class="text" id="no_18">test18</div>
  <div class="text" id="no_19">test19</div>
  <div class="text" id="no_20">test20</div>
  <button type=button class="back-to-top">
    <a href="#">トップへ戻る</a>
  </button>
  <!-- script.jsの読み込み -->
  <script src="scroll_button_script.js"></script>

</body>
</html>

CSS

stylesheet.css
body {
    height: 3000px;
}

.text{
    font-size: 50px;
}

.move-to-test {
    font-size: 80%;
}

/* リンクの下線を消す */
a {
    text-decoration: none;
}

/* :link擬似クラスでリンクの文字色を変える */
a:link { 
    color : #000000; 
}

/* :visited擬似クラスでリンククリック後の文字色を変える */
a:visited {
    color : #000000;
}

.back-to-top {
    /* スクロールされても位置を固定する */
    position: fixed;
    /* 画面右下に表示 */
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}

jQuery

scroll_button_script.js
$(function() {
    // $topBtnにback-to-topボタンのjQueryオブジェクトを代入
    var $topBtn = $('.back-to-top');

    // 最初はボタンを隠しておく
    $('.back-to-top').hide();

    // ボタンの表示条件
    $(window).scroll(function () {
        // スクロール量が500以上になったら
        if ($(this).scrollTop() > 500) {
            // ボタンを表示させる
            $topBtn.fadeIn();
        } else {
            // 500未満の場合は表示させない
            $topBtn.fadeOut();
        }
    });

    // ボタンクリックでページ内要素に移動
    // 特定の移動先が無い場合はページトップへ移動
    // aタグのhref属性の値が#始まりの場合のみ実行する
    $('a[href^="#"]').click(function() {
        // スクロールの速さ
        var speed = 400;
        // ボタンのhref属性の値を取得
        var href= $(this).attr("href");
        // ボタンのhref属性が#のみまたは存在しなければhtmlを返す
        // 値があればそれを取得する
        var $target = $(href == "#" || href == "" ? 'html' : href);
        // ボタンの位置の高さを取得する
        // $('html').offset().topの値は0になる
        var position = $target.offset().top;
        // body,htmlは両方指定する
        // positionで指定したスクロール位置に移動する
        // animateで動作が完了するまでの速さ(speed)と動作パターン(swing)を指定する
        $('body,html').animate({scrollTop:position}, speed, 'swing');

        // イベントのデフォルト効果を打ち消す=関数内で指定した動作しか行わない
        return false;
        // event.preventDefault();
    });
});

初心者メモ

return falseとは

デフォルトの動作を停止させる。
今回の場合、aタグのデフォルトの動きをしようとするので、それを打ち消さないと動作がおかしくなる。

preventDefaultstopPropagationを合わせたものらしい。
わかったようでわからないような・・・

jQuery のバブリング、preventDefault() や stopPropagation() の使用例

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away