縦に長い商品ページでカートまでスクロールするボタンをつけたい（スマホ）

Question

スマートフォン商品ページで縦に長くなってしまった場合にカートまで移動できるボタンをページの途中につけたいです。

楽天のスマートフォン商品ページには標準で「商品をかごに追加」「ご購入手続きへ」ボタンがありますが、カートの場所まで行って金額や選択肢などを確認してからボタンを押したいとの要望があります。

単純にカート付近まで移動するのであれば
カートに行く
リンクで飛ばすことができるのですが、

できれば同じく標準でついている「▲上へ」ボタンの様にスクロールして移動させる方法はないでしょうか？

Accepted Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

＞標準でついている「▲上へ」ボタンの様にスクロールして移動させる方法はないでしょうか？

JavaScriptを利用して実装することができます。

最初に、ボタンとなる要素にidまたはclass属性を記載してください。

スマートフォン用項目では、id・class属性の入力が禁止されておりますので、
タグ名の後ろに「 =""」を挿入して、禁止タグのチェックを回避してください。
タグに属性を追加する場合は、別のページにジャンプしないよう、
href属性は記載しないようお願いします。
ここでは、id="gotoTop" と設定したものとします。

例）
バナー用のHTML
上へ

次に、下記HTMLソースを追記していただくことで、
カート付近へスクロールしながら移動する動作を設定することができます。

= この下の行から ====================

jQuery(function($) {
  $('#gotoTop').click(function() {
    $('html,body').animate({scrollTop: $('#itemSpecification').offset().top}, 500, 'swing');
  });
});

= この上の行まで ====================

Answer

ECマスターズの村井です。

連休中のため遅くなりますが、
後ほど担当から回答させていただきます。

宜しくお願いいたします。

Answer

ありがとうございました。
できました！！