ホームページを作成し、リンクを飛ばしたいところにid名をつけ、トップページからリンクをかけています。

しかし、リンクをクリックした際、URLが「.co.jp/+++++.html**#id名**」になる場合と「.co.jp/+++++.html**?id=id名**」になる場合が発生してしまいます。
前者だと想定している位置と少しずれた位置に飛び、後者だと思い描いていた位置に飛ぶことができます。

原因として何が考えられるでしょうか？

具体的に上記の違いが出るパターンとしては、対象のページを開いてすぐが「#id名」のままになっていることが多く、同一サイト内の別のページを開いてから再度クリックすると「?id=id名」になっていることが多いような気がします。

ブラウザは、Google Chrome、Firefox、Operaで同様の現象が見られます。
URLが「#id名」から「?id=id名」になったとしても、履歴を削除すると「#id名」に戻ってしまいます。
なぜかIEでは最初から「?id=id名」となりうまくリンクできていました。

私自身は詳しい知識がなく分からないのですが、作成した方は以下のように記述していました。
原因と対処法を教えていただければと思います。
ご回答よろしくお願いいたします。

$(function($) {
  $(window).load(function(){

		var options = $.extend({

			scrollSpeed: 1000,
			easing: 'swing',
			adjustment: -150,
			delayTime: 300

			},options);

		$('[href*=#]').click(function(event){

			var element = $(this);
			var elementHref = element.attr('href');


			if(elementHref.search(/^#.+/) === 0){
				var targetId = elementHref;
				var targetY = $(targetId).offset().top + options.adjustment;
				event.preventDefault();
				$('html,body').animate({scrollTop: targetY},options.scrollSpeed,options.easing);

			}else {

				var hrefSplit = elementHref.split(/#/);
				var hrefFirst = hrefSplit[0];
				var hrefLast = '#' + hrefSplit[1];

				var pathname = location.pathname;
				var pathnameSplit = pathname.split(///);
				var pathNameLast = pathnameSplit[pathnameSplit.length - 1];

				var hostname = location.hostname;


				function aHrefCheck(){

					var check1 = hrefFirst.match(/https?://.[^/]+//);
					if(check1 === null){
						return true;
					}else{
						var check2 = check1[0].indexOf(hostname);
						if (check2 != -1){
							return true;
						}else{
							return false;
						}
					}
				}

				function aHrefChange(){ 

					if (hrefFirst.indexOf(pathNameLast) != -1){
						return;
					}else{
						hrefLast = hrefLast.replace('#','?id=');
						elementHref = hrefFirst + hrefLast;
						element.attr('href',elementHref);
					}
				}

				if(aHrefCheck() === true){
					aHrefChange();
				}else{
					return;
				}
			}
		});
		
		var url = $(location).attr('href');
		var stringMatch = url.indexOf('?id=');

		if(stringMatch === -1){
			return;
		}else {
			var urlSplit = url.split(/?id=/);
			var anchorLink = '#' + urlSplit[urlSplit.length -1];
			var anchorLinkTop = $(anchorLink).offset().top + options.adjustment;

			$('html,body').delay(options.delayTime).animate({scrollTop: anchorLinkTop},options.scrollSpeed,options.easing);

		}

	return this;

	});
});

コード

行動規範の内容に同意します

回答1件

ベストアンサー

location.hashを評価して、?id=id名と同等のロジックにはめてやればいいでしょう

sample

javascript
1<script>
2$(window).on('popstate pageshow',function(){
3  var selector="";
4  if(r=location.search.match(/[?&]id=(.+?)(?=&|$)/)) selector="#"+r[1];
5  if(h=location.hash) selector=h;
6  console.log(selector);
7});
8</script>
9<a href="?id=hoge">hoge</a><br>
10<a href="#fuga">fuga</a><br>
11<a href="?id=piyopiyo#piyo">piyo</a><br>