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

<!-- ページ内リンクボタン -->
  <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>
// 高さを与えているだけ
#test1, #test2, #test3, .btn-items {
  height: 1000px;
}

// ページ内リンクボタン
.btn {
  display: inline-block;
  padding: 10px;
  width: 100px;
  text-align: center;
  text-decoration: none;
  background: #3F51B5;
  color: #FFF;
  border-radius: 3px;
  transition: all 0.3s ease 0s;

  // 透明に近づける
  &:hover {
    opacity: 0.6;
  }
}

// フローティングボタン
.floating {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: none;
}
View Compiled
// ページ内リンクボタン
$(function(){
  // #で始まるリンクをクリックしたら実行
  $('a[href^="#"]').click(function() {
    // スクロールの速度
    var speed = 500;
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先の取得(上で取得したhrefと同じidの要素を探す)
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を数値で取得
    var position = target.offset().top;
    // ここでスムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

// フローティングボタン
$(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;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.