スムーススクロール
シングルページの基盤となるを学習します。まずは、サンプルをご覧ください。
【サンプル】
http://cocohp.com/sample/scroll/001/
See the Pen
smoothed scroll by nakatax (@cocohp)
on CodePen.
比較的に縦長のページ構成の場合、同ページ内での上下移動が頻繁に行われます。そのため、上下への移動がスムーズに行えるように配慮します。ユーザーが購読し、ある程度の高さのところにくると、右下にページトップへの矢印が出現します。
【手順】
1.jQueryのCDNを読み込みます。※jQueryの基本
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
2.今回は、三角の矢印に、font-awesomeを採用しますので、下記のCDNを追記します。
|
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以上になった時点で、フェイドインアウトをする動作と連携させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 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も用意されています。
|
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のにワーキングドラフトされました。スムーススクロールの動きを実現します。
|
1 2 3 |
html{ scroll-behavior: smooth; } |