【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

  • 2016.11.29
  • 2019.08.20
  • 技術
ページ内をスムーズに移動!スムーズスクロールの設置方法

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

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

実装サンプル

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

特に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="&lt;script&gt;" title="&lt;script&gt;" />
<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 );

以上で完了です。

デモサイト

細かいユーザビリティの向上で他サイトと差を付けよう

サイトを運営する上でサイトデザインやコンテンツの内容なども非常に重要であると言えます。しかしながら、ユーザーが第一に求めるのはどれだけ見やすいか・使いやすいかということです。

近年はモバイルファーストなサイトや1カラムのページが増えて、1ページが長いサイトが増加傾向にあります。そのようなサイトで高い効果を発揮するはずです。

簡単に追加し実装できるので是非設定しておきましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+