iframe スムーズアンカーリンクについて

Question

お世話になります。

弊社本店 スマホ・PCサイトのページで、アンカーリンクの動きに対して、
スムーズに動くJSの設定をかけています。

ページの中で、iframeを使用して表示しているページがあり、
子のページ内では、スムーズにスクロールしますが、
親ページに掲載後、スムーズにスクロールしません。

ifrmae内だけで、スムーズにスクロールする記述がありましたら、
ご教示のほど、よろしくお願いします。

▼子ページ
https://www.4860.jp/contents/iframe/maker_all.html

▼子ページソース



▼scroll.js内▼
//ページトップへ

	$(function() {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {

        if ($(this).scrollTop() > 150) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 200);
        return false;
    });
});

	
//スムーススクロール
	$(function(){
	   // #で始まるアンカーをクリックした場合に処理
	   $('a[href^=#]').click(function() {
	      // スクロールの速度
	      var speed = 1000; // ミリ秒
	      // アンカーの値取得
	      var href= $(this).attr("href");
	      // 移動先を取得
	      var target = $(href == "#" || href == "" ? 'html' : href);
			 //固定ヘッダーの高さ
			var headerHeight = 105;
	      // 移動先を数値で取得し、ターゲットの座標からヘッダーの高さ分を引く
	      var position = target.offset().top - headerHeight;
	      // スムーススクロール
	      $('body,html').animate({scrollTop:position}, speed, 'swing');
	      return false;
	   });
	
	});
	

// 別ページからのリンク
$(window).on('load', function() {
  var headerHight = 105; //ヘッダの高さ
  if(document.URL.match("#")) {
  var str = location.href ;
  var cut_str = "#";
  var index = str.indexOf(cut_str);
  var href = str.slice(index);
  var target = href;
  var position = $(target).offset().top - headerHight;
  //$("html, body").scrollTop(position);
  $('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
}
 
});



▼親ページ
・スマホ
https://www.4860.jp/sp/sub/all_maker_category/
・PC
https://www.4860.jp/sub/all_maker_category/


▼親ページソース
■スマホ・PC同じです


$(".iframeClass").on("load", function(){
    try {
        $(this).height(0);
        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
    } catch (e) {
    }
});
$(".iframeClass").trigger("load");

Answer

ECマスターズの田中です。

親ページの中でスクロールを行うよう、動作をご変更いただく必要がございます。

スムーススクロールに関わる

var position = target.offset().top - headerHeight;
$('body,html').animate({scrollTop:position}, speed, 'swing');

以上２行を、それぞれ

var position = target.offset().top + parent.pageYOffset + frameElement.getBoundingClientRect().top;
$('body,html', parent.document).animate({scrollTop:position}, speed, 'swing');

のようにご変更の上、動作をご確認願います。

Answer

ECマスターズ 田中様。
お世話になります。

頂いた、内容に修正し、
無事に動作いたしました。

ありがとうございました。