開発者ツールのエラー確認

offset().top;のエラー

原因

jquery.3.0以降では廃止されている書き方をしています。

対応方法

該当のファイル内で、下記のように記述を差し替えます。

$(window).load(function(){
↓
$(window).on('load',function(){

mCustomScrollbar.jsのエラー

原因

主にトップページのお知らせ部分で利用する、スクロールバーにデザインをあてるjsですが、古いjsのためか、正常に動作せず、スクロールを妨げている場合があります。
参考：custom content scrollerでスクロールバーをカスタマイズする方法【jQuery】

対応方法

そもそも使用していないのに埋め込まれている場合が多々あります。
その場合は、該当する記述を削除（コメントアウト）してください。（newsフォルダの中の、index.phpかnews.php、もしくはトップページのindex.htmlに直書きしている場合があります）

▼このような記述です。

<script>
$(document).ready(function () {
	$(".scroll_area").mCustomScrollbar({
		axis: "yx",
		theme: "rounded-dark",
		scrollButtons: {
			enable: true
		}
	});
});
</script>

$(document).ready(function () {

$(".scroll_area").mCustomScrollbar({

axis: "yx",

theme: "rounded-dark",

scrollButtons: {

enable: true

}

});

</script>

mCustomScrollbar.jsを読み込んでいる部分も削除してください。
削除しても動かない場合や、カスタムスクロールバーを実際に使用していて削除できない場合は、他の不具合を解消してみます。
『エラーが出ていない・エラーが修正できない場合』へ。

SmoothScroll.jsのエラー

後述の『開発者ツール等で見ると、aタグのリンク先が『javascript:void(0)』と表示される』を確認してください。

エラーが出ていない・エラーが修正できない場合

下記の項目を、上から順番にチェックしてみてください。
※複数の要素が絡んでいる場合もあります。一つ対処してもなおらない場合は、他の項目も確認してください。

ハンバーガーメニューの不具合の場合
ジャンプ位置がずれる
該当箇所にジャンプしない
その他の事例

ハンバーガーメニューの不具合の場合

spのハンバーガーメニューで、リンク先が同一ページ内のアンカーリンクの場合に、ジャンプしなかったり、ハンバーガーメニューが閉じないことがあります。

原因

ハンバーガーメニューを制御しているjsに、リンクをクリックした場合の動作を記述していないため。
他ページへの遷移の場合は、ページ読み込みにともない自動的にハンバーガーメニューが初期状態にリセットされますが、ページ内リンクの場合は、ページ読み込みによる初期化が行われないので、初期化する（ハンバーガーを閉じる）記述が必要になります。

対応方法

main.jsないしspMenu2.jsなど、スマホのハンバーガーメニューに関する記述のあるjsファイルの最後（最初のfunctionの閉じタグの直前）に、下記の記述を追加します。
※クラス名など調整が必要な場合があるかもしれません。

$(".sp_link a").on("click", function () {
	$('body').removeClass('fixed').css({
			'top': 0
		});
	window.scrollTo(0, scrollpos);
	$(".sp_navi_list").slideUp(300);
	$('.sp_navi').css('height', 'auto');
	$('.sp_navi dt a').removeClass('active')
	$('.sp_navi_parent').removeClass('sp_navi_parent_active')
	$('.sp_navi_children').slideUp(300);
});

$(".sp_link a").on("click", function () {

$('body').removeClass('fixed').css({

'top': 0

});

window.scrollTo(0, scrollpos);

$(".sp_navi_list").slideUp(300);

$('.sp_navi').css('height', 'auto');

$('.sp_navi dt a').removeClass('active')

$('.sp_navi_parent').removeClass('sp_navi_parent_active')

$('.sp_navi_children').slideUp(300);

});

▼実例：https://kimurashika.jp/doctor.html
医師紹介ページを開いた状態で、ハンバーガーメニューの医師紹介＞院長紹介をタップした場合に同現象が起きていたので、main.jsに上記記述を追加しています。

ジャンプ位置がずれる

大きくずれる場合

原因・対応方法

後述の『リンク先ページに遷移した後、ページの読み込みが終わる前に、アンカーリンクが作動している』可能性が高いです。（html読み込み ⇒ ジャンプ ⇒ 画像読み込みの順番になっているため、動くには動きますが、画像の分ずれるという現象です。）同項目を参考に、jsで順序をコントロールしてください。

グロナビ（固定ヘッダー）で上部が隠れる場合

対応方法

cssで、ジャンプ先の要素の上に見えない余白を作って調整するか、jsで対応します。

※最近のテンプレートでは、cssではなくjsで調整しています。cssだとうまく効かない要素もあり、クラス名を付け忘れる可能性もあるので、jsに抵抗がなければ最新のテンプレのmain.jsを参考に、スムーススクロール部分のjsを編集してください。

参考サイト：https://senoweb.jp/note/fixheader-anchorlink/

▼CSSの場合は、ジャンプ先の要素に、マイナスmarginと、padingを追加します。

margin-top: -100px;
padding-top: 100px;

1 2	margin-top: -100px; padding-top: 100px;

「100px」というのは、固定ヘッダーの高さ＋αです。適宜変更可。PCとスマホで固定ヘッダーの高さは異なるはずなので、sp.cssでも値を調整するとベターです。
margin-topは、直前の要素のmargin-bottomと打ち消し合うため、ずれる場合があります。また、タイトルなどは元々上部余白が指定されている場合もあります。
そういう時は、idを付けている要素自体ではなく、その上（もしくは開始タグ直後）に空のdivタグを挿入し、そのdivにマイナスmarginと、padingを設けることで解決する場合があります。
直前にリンクがある場合、この見えない余白がリンクの上に被ることで、リンクがクリックできなくなることがあります。
必ず確認し、クリックできないリンクがあれば、z-indexで対応してください。(z-index: -1;は色々不具合が出る可能性があるので、上にしたい要素（リンクがある要素）のz-indexを上げる方がいいかと思います。)

固定ヘッダーの高さの値が間違っている

原因

main.jsの中で固定ヘッダーの値を取得したり、手入力している場合に、その値がデフォルトのまま、サイトに合わせて修正されていないことがあります。

対応方法

『scrollpos』『pcNavHeight』『spNavHeight』等の変数が使われていることが多いので、main.jsでこれらの文言を検索してみて、修正してください。

▼実例：2021.10.11のスラック
cssで調整済みだったので、jsでの調整が不要だった例です。

該当箇所にジャンプしない

リンク先にアンカーリンク（id）が設定されていない／リンク元とリンク先が異なる

原因

お知らせ以外の場合は、リンク先にidが付いていなかったり、リンク元の「#○○○」と一致していないなどのケアレスミスがないか確認します。

お知らせ部分の場合、phpに該当の記述が抜けているか、書き方が間違っているので、phpの修正が必要になります。

対応方法（お知らせの場合）

お知らせページで読み込んでいるphp（index.phpやnews.phpなど。お知らせページのソースを開き、「load」で検索して確認）に、アンカーリンクの記述を追加します。

【例：inputタグが使われている場合】
<input type="hidden" value="<?php echo $key; ?>">
↓
<div id="nw<?php echo $key; ?>">　＋　適切な位置に</div>

『<?php echo $key; ?>』部分は記事ごとに順番に数字が書き出されます。
『nw<?php echo $key; ?>』部分は、ジャンプ元のアンカーリンクと一致させてください。
クラス名は、ジャンプ位置が固定ヘッダー分ずれる現象を調整している記述がCSSにある場合は、クラスもつけてください。（ class="anchor" など。jsで調整している場合は不要。）

リンク元のaタグのhrefにアンカーリンク（#○○○）が記載されていない

対応方法（お知らせの場合）

トップページで読み込んでいるお知らせのphp（index.phpやnews.phpなど。トップページのソースを開き、「load」で検索して確認）に、アンカーリンクを出力します。

『nw<?php echo $key; ?>』部分は、ジャンプ先のアンカーリンクと一致させます。
上記は一例です。そもそもaタグ自体が抜けていたり、色々パターンがあります。

開発者ツール等で見ると、aタグのリンク先が『javascript:void(0)』と表示される

原因

SmoothScroll.jsが邪魔をしています。

対応方法

SmoothScroll.jsを削除して、代わりの記述をmain.jsに追記します。
※main.jsがなければ、新しくscroll.jsなど任意のファイル名でjsファイルを作成し、全ページに読み込ませてください。

$(window).on('load', function () {
	var urlHash = location.hash;
	if (urlHash) {
		$('body,html').stop().scrollTop(0);
		setTimeout(function () {
			var target = $(urlHash);
			var position = target.offset().top;
			$('body,html').stop().animate({
				scrollTop: position
			}, 500);
		}, 200);
	}
});
$(function () {
	$('[href^="#"]').click(function(){
		var targetLink = $(this).attr('href');
		var linkHash = targetLink.indexOf('#');
		if (linkHash) {
			var targetURL = targetLink.split('#');
			var nowPageURL = location.pathname;
			nowPageURL = nowPageURL.split('/');
			if (targetURL[0] == nowPageURL.pop()) {
				var position = $('#' + targetURL[1]).offset().top;
				$("html, body").animate({
					scrollTop: position
				}, 600, "swing");
				return false;
			}
		}
	})
});

$(window).on('load', function () {

var urlHash = location.hash;

if (urlHash) {

$('body,html').stop().scrollTop(0);

setTimeout(function () {

var target = $(urlHash);

var position = target.offset().top;

$('body,html').stop().animate({

scrollTop: position

}, 500);

}, 200);

}

});

$(function () {

$('[href^="#"]').click(function(){

var targetLink = $(this).attr('href');

var linkHash = targetLink.indexOf('#');

if (linkHash) {

var targetURL = targetLink.split('#');

var nowPageURL = location.pathname;

nowPageURL = nowPageURL.split('/');

if (targetURL[0] == nowPageURL.pop()) {

var position = $('#' + targetURL[1]).offset().top;

$("html, body").animate({

scrollTop: position

}, 600, "swing");

return false;

}

})

});

index.htmlへのアンカーリンクの場合

原因

htaccessで、URLからindex.htmlを消す記述がある時、index.html内（トップページや、medical/index.htmlなど）へのアンカーリンクが飛ばないタイミングがあるようです。

対応方法

▼うまくいくパスの書き方があるようです。

NG：medical/index.html#hoge
OK：medical/#hoge

▼上記で動かなければ、URLからindex.htmlを消すのを諦めて、canonicalで正規化します。

htaccessから、該当の記述を削除（『index.htmlなしに統一』部分を削除。わからなければ作業効率化ブックを参考にしてみてください。）
index.htmlのheadタグ内にcanonicalタグを設置

<link rel="canonical" href="https://ドメイン/">

1

<link rel="canonical" href="https://ドメイン/">

実装例：HEROコーポレートサイト
参考：https://www.seohacks.net/blog/989/

リンク先ページに遷移した後、ページの読み込みが終わる前にアンカーリンクが作動している

原因

リンク先となるアンカーリンク（idがついた要素）が読み込まれる前に、アンカーリンクが作動
⇒リンク先が存在しないのでジャンプしない
⇒その後で要素が読み込まれるが、アンカーリンクの動作は終わっているので、動かない
という現象です。
お知らせページや、画像が多く重いページ（院内写真のスライダーあるクリニック紹介ページなど）で起こりがちです。

対応方法

ページの読み込みが終わってからアンカーリンクが動作するように、jsでコントロールします。
参考：http://whatsweb.info/?p=143

main.jsにスムーススクロールの記述がある場合

ページの読み込み後に動くように、スムーススクロール部分の記述を、$(window).on('load',function(){　});で囲みます。

$(window).on('load',function(){
//スムーススクロールの内容
});

$(window).on('load',function(){

//スムーススクロールの内容

});

main.jsにスムーススクロールの記述がない場合

下記の記述をmain.jsに追加するか、新しくファイルを作成（scroll.js等任意のファイル名）して、全ページで読み込みます。
※リンク先ページのフッターに追加するだけでも動きます。

<script>
$(window).on('load',function(){
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 'slow');
	return false;
});
</script>

$(window).on('load',function(){

var ahash = location.hash;

var gotoNum = $(ahash).offset().top;

$('html,body').animate({ scrollTop: gotoNum }, 'slow');

return false;

});

</script>

▼固定ヘッダー分のジャンプ位置調整をcssやjsで行っていない場合は、上記コードの代わりに、下記のコードを使用すると調整できます。
5行目の130のところを固定ヘッダーの高さに変更してください。
（PCとスマホで値を分けたい場合は、最新のオリジナルテンプレートのmain.jsなどを参考に条件分岐させてください。）

<script>
$(window).on('load',function(){
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum - 130 }, 'slow');
	return false;
});
</script>

$(window).on('load',function(){

var ahash = location.hash;

var gotoNum = $(ahash).offset().top;

$('html,body').animate({ scrollTop: gotoNum - 130 }, 'slow');

return false;

});

</script>

その他の事例

※クリックするとスラックが開きます。