長いスマホ商品ページでも購入導線をわかりやすく表示し離脱を防ぐ
画像やテキストで商品が訴求された長い商品ページは商品の情報が充実していてるのですが、いざ買おうと思ったときに「どっから買うたらええねん」となってしまうことがあります。特にスマートフォンでは画面が小さい分注意。
そうなってしまわないように、今回は商品ページでユーザーにを迷わせないようにカートボタンへの固定ボタンを表示させます。
下記がサンプルの商品詳細ページです。iframe内をスクロールしてみてください。
スクロールすると、「この商品を購入する」のボタンをふわっと表示。
ボタンをタップすると、「カートに入れる」へ。スルスルっとレジまで連れて行ってくれます。
下記の方法で実装可能です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
JQueryを使用しますのでライブラリを読み込んでおきます。
なお、新しいバージョンのほうが読み込み速度が速いです。
<div class="toCartButton"> <a href="#☆☆☆☆"> <p>この商品を購入する ></p> </a> </div>
☆☆☆☆の部分は、ボタンをタップしたときにスクロールする先のIDを記載して下さい。
なお、表示速度のことを考えると、htmlの下部に記述するほうが良いです。
CSSでボタンをページ下部に固定します。
.toCartButton {
/*ページ下部に固定*/
position: fixed;
bottom: 0px;
width: 100%;
}
こちらのCSSでページ下部にボタンを固定します。
関連記事：【jQuery】レンスポンシブな固定フッターメニューの作成方法 | Mobile First Marketing Labo
なお、ボタンの上に影を付ける場合は下記のCSSで設定可能。
/*ボタン上部に影をつける*/ box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
$(function() {
var topBtn = $('.toCartButton');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
どのくらいスクロールしたら表示するかは、上の数字を書き換えると調整可能です。
(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 );
関連記事：ページ内リンクをスムーズに移動！スムーズスクロールの設置方法 | Mobile First Marketing Labo
こちらで完成です！
近年はモバイルファーストなサイトや1カラムのページが増えて、1ページが長いサイトが増加傾向にあります。そのようなサイトでは是非ともお試しください。
