実装内容

ある程度スクロールされたら、「トップへ戻る」ボタンを徐々に表示させる
「トップへ戻る」ボタンをクリックしたら、ページの先頭へ戻る
「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タグのデフォルトの動きをしようとするので、それを打ち消さないと動作がおかしくなる。

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

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

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