URLにアンカーリンクを付加させない

Question

idでページリンクさせた場合にURLの末尾に#tab1とついてしまうのですが、URLにアンカーリンクを付加させないでtest.htmlのみにしたく考えています。
URLにアンカーリンクを付加させないで目的の場所へ移動させたいです。

<div class="flex">
		<div>
			<div><a class="icon1" href="test.html/#tab1"><img src="" alt=""></a></div>
			<p><a class="icon1" href="test.html/#tab1">テスト１</a></p>
		</div>
		<div>
			<div><a class="icon2" href="test.html/#tab2"><img src="" alt=""></a></div>
			<p><a class="icon2" href="test.html/#tab2">テスト２</a></p>
		</div>
		<div>
			<div><a class="icon3" href="test.html/#tab3"><img src="" alt=""></a></div>
			<p><a class="icon3" href="test.html/#tab3">テスト３</a></p>
		</div>
		<div>
			<div><a class="icon4" href="test.html/#tab4"><img src="" alt=""></a></div>
			<p><a class="icon4" href="test.html/#tab4">テスト４</a></p>
		</div>
		<div>
			<div><a class="icon5" href="test.html/#tab5"><img src="" alt=""></a></div>
			<p><a class="icon5" href="test.html/#tab5">テスト５</a></p>
		</div>
		<div>
			<div><a class="icon6" href="test.html/#tab6"><img src="" alt=""></a></div>
			<p><a class="icon6" href="test.html/#tab6">テスト６</a></p>
		</div>
		<div>
			<div><a class="icon7" href="test.html/#tab7"><img src="" alt=""></a></div>
			<p><a class="icon7" href="test.html/#tab7">テスト７</a></p>
		</div>
	</div>

<p class="page-15-p">ダミーテキスト</p>
<!--タブ-->
<ul class="tab-group" id="group-top">
	<li id="tab1" class="tab is-active">テスト１</li>
	<li id="tab2" class="tab">テスト２</li>
	<li id="tab3" class="tab">テスト３</li>
	<li id="tab4" class="tab">テスト４</li>
	<li id="tab5" class="tab">テスト５</li>
	<li id="tab6" class="tab">テスト６</li>
	<li id="tab7" class="tab">テスト７</li>
</ul>

<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
  <div class="panel is-show">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
</div>

.tab{
    flex-grow: 1;
    list-style:none;
    text-align:center;
    cursor:pointer;
	width:calc(100% / 7);
	height:80px;
	font-size:0.6em;
	position:relative;
	padding-top:70px;
	color:#ccc;
	box-sizing:border-box;
}
.tab:hover{
	color:#000;
}
.tab:before{
	content:"";
	position:absolute;
	left:50%;
	top:10%;
	 transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
	display:inline-block;
	width:5em;
	height:5em;
    background:url() no-repeat;
	background-size:contain;
}

	<script type="text/javascript">
//タブ操作
jQuery(function($){
	var target = $('.page-15-p');
    var position = target.offset().top;
    $('.tab').click(function(){
        $('.is-active').removeClass('is-active');
        $(this).addClass('is-active');
        $('.is-show').removeClass('is-show');
        // クリックしたタブからインデックス番号を取得
        const index = $(this).index();
        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
        $('.panel').eq(index).addClass('is-show');
    });
	$('.tab1').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab1').addClass('is-active');
        $('#tab1').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab2').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab2').addClass('is-active');
        $('#tab2').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab3').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab3').addClass('is-active');
        $('#tab3').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab4').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab4').addClass('is-active');
        $('#tab4').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab5').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab5').addClass('is-active');
        $('#tab5').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab6').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab6').addClass('is-active');
        $('#tab6').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
    });
	$('.tab7').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab7').addClass('is-active');
        $('#tab7').addClass('is-show');
		$('body,html').stop().animate({scrollTop:position}, 500);
		return false;
    });
});
</script>
		<script type="text/javascript">
//タブ内から別タブへのページ内リンク
jQuery(function($){
    $('.anchor').click(function(){
        $('.tab:first-child').removeClass('is-active');
        $('.tab:nth-child(3)').addClass('is-active');
       $('.is-show').removeClass('is-show');
        $('.panel:nth-child(3)').addClass('is-show');
	 var target = $('#page-link1');
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500);
		return false;
    });
});
</script>
	<script>
// 		タブへのダイレクトリンク
		jQuery(function($){
	$(function() {
  //#以下を取得
  var hash = location.hash ;
  //[#tab～]であるか確認
  hash = (hash.match(/^#tab\d+$/) || [])[0];

 if($(hash).length){
  //[#tab～]である場合、#より後を取得    
    var tabname = hash.slice(7);
    var tabbar = tabname - 1;
  } 
   $(function() {
       $('.is-active').removeClass('is-active');
        $(hash).addClass('is-active');
        $('.is-show').removeClass('is-show');
        // クリックしたタブからインデックス番号を取得
        const index = $(hash).index();
        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
        $('.panel').eq(index).addClass('is-show');
			});
  } );
		});
	</script>
	<script>
		jQuery(function($){
$(document).ready(function(){
  //URLのハッシュ値を取得
  var urlHash = location.hash;
  //ハッシュ値があればページ内スクロール
  if(urlHash) {
    //スクロールを0に戻す
    $('body,html').stop().scrollTop(0);
    setTimeout(function () {
      //ロード時の処理を待ち、時間差でスクロール実行
      scrollToAnker(urlHash) ;
    }, 100);
  }

  //通常のクリック時
  $('.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7').click(function() {
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });

  // 関数：スムーススクロール
  // 指定したアンカー(#ID)へアニメーションでスクロール
  function scrollToAnker(hash) {
    var target = $('.page-15-p');
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500);
  }
})
			});
	</script>
	<script>
		jQuery(function($){
	// liのうち、href属性が指定されているものを取得
$('li[href]').click(function(){
    let href = $(this).attr('href');
    location.href = href;
    // window.open(href);
});
			});
	</script>

Comments

[gouf]

こちらが参考になりますか? : https://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url

[nakajima4]

参考になる資料を教えていただいてありがとうございます。
スクロールする方法で位置の調整は解決したのですが、return falseが効いていないのか、URLに＃がついてしまいました。

[Lhankor_Mhy]

昨日も同じ質問を見たのですが、流行っているんでしょうか……？
https://teratail.com/questions/208594

Answer 1

 $('.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7').click(function() {
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });

<a> はリンクにマークアップするものです。
return false; でリンク機能を無効化するなら、それはリンクではないので、<a> でマークアップするのを止めましょう。
そうすれば、URL に #tab1 が付与されることはなくなります。

Re: nakajima4 さん