トップへ戻るボタンをスムーススクロールするやり方

Question

スクロールすると出てくるトップへ戻るボタンを作成しましたが、スムーススクロールするやり方がわかりません。
どうすれば出来るか教えてください。

CSS
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ffffff;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 70px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #444444;
  position: absolute;
  width: 25px;
  height: 75px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

HTML

Answer

ECマスターズの田中です。

CSSの中に
html { scroll-behavior: smooth; }
を加えていただくことで、簡単に実装していただくことができます。
（InternetExplorerおよびSafariには未対応です）

ページ内にjQueryが導入されている場合は、下記scriptタグでもご対応いただけます。


$(function(){
  $('a[href^="#"]').click(function(){
    let speed = 500;
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

Answer

コマースクリエイターを使っております。
確認したところjQueryは実装されているそうなので、教えてもらったScriptタグを、CSS登録箇所、商品詳細ページにパーツを作って配置してみましたが、いずれも反応しません。
どの箇所に入れるかわかりますでしょうか？
iPhoneでも反応させたいです。

Answer

ECマスターズの田中です。

入れる箇所の前に、
動作していない原因を実際のページ内で
探る必要がございますので、

コードを入れていただいたページのURLを、
返信または「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございます。

確認したところ、
該当ページにて、jQueryの読み込みが行われておりませんでしたので、
たとえば

https://developers.google.com/speed/libraries#jquery
上記ページ、「jQuery 3.x snippet:」の下の
灰色になっているscriptタグを、先にご案内差し上げたscriptタグよりも
前の位置にご記載いただきますようお願いします。

同じパーツ内でも結構ですが、
今後、サイト全体で利用することを見越して、
headタグ内にご記載いただいても結構です。