前提・実現したいこと
ページ内スクロールで#(アンカー)を使わない方法はないでしょうか。
#(アンカー)をタブの切り替えで使用した場合、
タブの切り替わりと同時にスクロールも動いてしまいます。
タブの切り替えでは#(アンカー)を使用したいです。
何か良い方法がありましたらお教え下さい。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<JS> $(function(){ $('a[href^=#]').click(function() { var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });l <!-- タブの切り替え --> <script type="text/javascript"> function ChangeTab(tabname) { document.getElementById('tab001').style.display = 'none'; document.getElementById('tab002').style.display = 'none'; if(tabname) { document.getElementById(tabname).style.display = 'block'; } } </script> <html> <div class="nav_box"> <ul class="nav"> <li><a href="#pagelink_1">トップ</a></li> <li><a href="#pagelink_2">セカンド</a></li> <li><a href="#pagelink_3">サード</a></li> </ul> </div><span id="pagelink_1"></span>
<div>要素1</div> <span id="pagelink_2"></span> <div>要素1</div> <span id="pagelink_3"></span> <div>要素1</div> <div class="check_box"> <ul class="tabbtn"> <li><a onClick="ChangeTab('tab001'); return false;" class="t01" href="#tab001">要素A</a></li> <li><a onClick="ChangeTab('tab002'); return false;" class="t01" href="#tab002">要素B</a></li> </div> <div class="tab"> <h4 id="tab001">要素A内容</h4> <h4 id="tab002">要素B内容</h4> </div>試したこと
・ページ内リンク
・ページ内スクロール
・ページ内リンク アンカー#以外
・ページ内リンク #を使わずに
をネット検索しましたが、希望の情報を得られませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。