スムーススクロール

シングルページの基盤となるを学習します。まずは、サンプルをご覧ください。
【サンプル】
http://cocohp.com/sample/scroll/001/

See the Pen
smoothed scroll by nakatax (@cocohp)
on CodePen.

比較的に縦長のページ構成の場合、同ページ内での上下移動が頻繁に行われます。そのため、上下への移動がスムーズに行えるように配慮します。ユーザーが購読し、ある程度の高さのところにくると、右下にページトップへの矢印が出現します。

【手順】
1.jQueryのCDNを読み込みます。※jQueryの基本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2.今回は、三角の矢印に、font-awesomeを採用しますので、下記のCDNを追記します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

1	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

これで、jQueryとfont-awesomeが利用できる基本準備が整いました。

3.scroll.jsを作成し、外部読み込みにします。

今回は、2つのアクションを搭載しています。#で始まるすべての動作が、swingする動きを実装します。それに加え、.pagetopというクラスセレクタを用意し、CSSにて非表示にしておきます。(display:none)スクロールが100以上になった時点で、フェイドインアウトをする動作と連携させます。

// scroll.jsの内容
      $(function(){
        // #で始まるリンクをクリックしたら実行
        $('a[href^="#"]').click(function() {
          // スクロールの速度
          var speed = 400; // ミリ秒で記述
          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;
        });
      });


$(function(){
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 700);
              return false;
   });
});

// scroll.jsの内容

$(function(){

// #で始まるリンクをクリックしたら実行

$('a[href^="#"]').click(function() {

// スクロールの速度

var speed = 400; // ミリ秒で記述

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;

});

$(function(){

var pagetop = $('.pagetop');

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

pagetop.fadeIn();

} else {

pagetop.fadeOut();

}

});

pagetop.click(function () {

$('body, html').animate({ scrollTop: 0 }, 700);

return false;

});

CDN

CDNも用意されています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>

【追記2020】

scroll-behavior

scroll-behavior は、スクロールの振る舞いを設定します。2016年にW3Cのにワーキングドラフトされました。スムーススクロールの動きを実現します。

html{
  scroll-behavior: smooth;
  }

html{

scroll-behavior: smooth;

}