• 文字サイズ


解決済

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

  • 相談者:非公開
  • 2020/12/07 11:38
お世話になります。

弊社本店 スマホ・PCサイトのページで、アンカーリンクの動きに対して、
スムーズに動くJSの設定をかけています。

ページの中で、iframeを使用して表示しているページがあり、
子のページ内では、スムーズにスクロールしますが、
親ページに掲載後、スムーズにスクロールしません。

ifrmae内だけで、スムーズにスクロールする記述がありましたら、
ご教示のほど、よろしくお願いします。

▼子ページ
https://www.4860.jp/contents/iframe/maker_all.html

▼子ページソース
<script type="text/javascript" src="/sp/contents/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/sp/contents/js/scroll.js"></script>

▼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同じです
<iframe src="/contents/iframe/maker_all.html" class="iframeClass" frameborder="0" height="100%" width="100%" scrolling="no" ></iframe>
<script>
$(".iframeClass").on("load", function(){
try {
$(this).height(0);
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
});
$(".iframeClass").trigger("load");
</script>
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2020/12/07 15:22
ECマスターズの田中です。

親ページの中でスクロールを行うよう、動作をご変更いただく必要がございます。

スムーススクロールに関わる

var p………(省略)………
  • 返信者:非公開(質問者)
  • 2020/12/07 15:49
ECマスターズ 田中様。
お世話になります。

頂いた、内容に修正し、
無事に動作いたしました。

ありがとうございました。………(省略)………