ページ内をスムーズに移動！スムーズスクロールの設置方法

皆さんこんにちは。昼と夜の気温差が大きかったり、日によって汗ばむくらいの天気になったり、毎日の服装が難しく感じるサポート部山本です。

さて、今回はスマホサイトでもよく採用されているスムーズスクロールという画面移動を簡単にするJSの設置方法を、レスポンシブwebデザインに対応した形でご案内します。

1. 実装サンプル
2. スムーズスクロースを実装する
3. 細かいユーザビリティの向上で他サイトと差を付けよう

実装サンプル

情報量が多くスマートフォンで縦に長くなりがちなサイトも多いと思います。情報量が多いことは全く問題ないですしむしろユーザーの求める情報を網羅していて良いのですが、ページの下部までサイトを見た後に一番上まで戻るためにスクロールをしていては少し面倒です。

特にECサイトなどのサイトでは、どの商品を選ぶかを選定するために上下に様々な商品を確認することが多いはずです。ある意味スムーズスクロースを実装するだけでも購入率を多少上昇できるのではないでしょうか。

さて、本題ですがスムーズスクロールとはサイトをタップするだけでスムーズな動きを付けてアンカーを付けた箇所に遷移するというものです。

まずはスムーズスクロールを実装したデモサイトを御覧ください。

スムーズスクロールデモサイト

スマホでページ内をスクロールしていくと、画面右下にアイコンがフェードイン表示され、タップするとスムーズにページトップへ移動します。

smoothscroll_smp

PCサイトでは動きは同様ですが、下図のように表示させます。

smoothscroll_pc

では実際に実装方法を4ステップに分けてご紹介します。たったの4ステップで完了できます、簡単ですね。

スムーズスクロースを実装する

ステップ1：head内の記述

まずはhead内で以下のjQueryを読み込ませます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.3%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

ステップ2：HTMLの記述

次にbody内にHTMLを記述していきます。hrefには移動させたい位置のID名を設定して下さい。


<div class="SmoothScroll_pageTop scroll-fade"> <a href="#sysAll" class="gimmickSmoothScroll"><span>ページのトップへ戻る</span></a> </div>

ステップ3：CSSの記述

CSSはお好みのデザインでよいですが、サンプルを記載しておきます。

.SmoothScroll_pageTop{
	text-align:right;
	position: fixed;
	bottom: 3%;
	right: 5%;
	display: none;
}
.SmoothScroll_pageTop a{
	display:inline-block;
	background-color:rgba(54, 54, 54, 0.4);
	padding:10px 20px;
	margin:10px 0;
	color:#FFF;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
.SmoothScroll_pageTop a::before{
	font-family:FontAwesome;
  content: "\f062";
	margin-right:5px;
}
.SmoothScroll_pageTop a:hover{
	background-color:rgba(54, 54, 54, 0.6);
}

@media only screen and (max-width: 768px) {
	.SmoothScroll_pageTop a{
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		width:50px;
		height:50px;
		padding:0;
		text-align:center;
		line-height:50px;
	}
	.SmoothScroll_pageTop a::before{
		margin-right:0;
	}
	.SmoothScroll_pageTop a span{
		display:none;
	}
}

ステップ4：JavaScriptの記述

最後にJavaScriptを以下のように記述していきます。

(function($) {
	'use strict';

	$(function() { 
		var scrollSpeed = 1000, // スクロール時間（ミリ秒）
				buttonOffset = 200; // トップへ戻る固定ボタンを表示するスクロール量（px）
	
		// スムーズスクロール
		$('a[href^="#"]').on( 'click', function() {
			var href= $(this).attr( 'href' );
			if ( href !== '#' || href !== '' ) {
				var target = ( href === '#top' && !$('#top').length ) ? 'html' : href,
						position = $(target).offset().top;
				$('body, html').animate( {scrollTop:position}, scrollSpeed, 'swing' );
				return false;
			}
		});
		// トップへ戻る固定ボタンの表示・非表示
		if ( $('.scroll-fade').length ) {
			var sfBtn = $('.scroll-fade'),
					sfBtnDisplay = '',
					flagAnimate = false;
			$(sfBtn).css( 'display', 'none' );
			$(window).on( 'scroll', function() {
				sfBtnDisplay = sfBtn.css( 'display' );
				if ( $(this).scrollTop() > buttonOffset && sfBtnDisplay === 'none' && !flagAnimate ) {
					flagAnimate = true;
					sfBtn.fadeIn(function() {
						flagAnimate = false;
					});
				} else if ( $(this).scrollTop() <= buttonOffset && sfBtnDisplay !== 'none' && !flagAnimate )  {
					flagAnimate = true;
					sfBtn.fadeOut(function() {
						flagAnimate = false;
					});
				}
			});
		}
	});

})( jQuery );

以上で完了です。

デモサイト