お世話になります。
弊社本店 スマホ・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>