Q&A
何も調べがつかない内容でしょうか。
前提・実現したいこと
ページ内スクロールで#（アンカー）を使わない方法はないでしょうか。
#（アンカー）をタブの切り替えで使用した場合、
タブの切り替わりと同時にスクロールも動いてしまいます。
タブの切り替えでは#（アンカー）を使用したいです。
何か良い方法がありましたらお教え下さい。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<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>要素１</div> <span id="pagelink_2"></span> <div>要素１</div> <span id="pagelink_3"></span> <div>要素１</div> <div class="check_box"> <ul class="tabbtn"> <li><a onClick="ChangeTab('tab001'); return false;" class="t01" href="#tab001">要素Ａ</a></li> <li><a onClick="ChangeTab('tab002'); return false;" class="t01" href="#tab002">要素Ｂ</a></li> </div> <div class="tab"> <h4 id="tab001">要素Ａ内容</h4> <h4 id="tab002">要素Ｂ内容</h4> </div>試したこと
・ページ内リンク
・ページ内スクロール
・ページ内リンク アンカー#以外
・ページ内リンク #を使わずに
をネット検索しましたが、希望の情報を得られませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
検索をかけでも＃を使ったものばかりで困ってます。
この質問内容では調べたかどうかもわかりませんので、調べたこと試したことを具体的に記載してください
調べた内容は、質問内容をネット検索しただけです。
上手い方法がみつからずまだ何も試していないです。。。
調べ方 を聞いています。
「ネット検索した」だけだと、どのようなキーワードを投入したのか、どういう記事を参照したのか誰にも伝わりません。
なので、もしかしたらヒントがあったかもしれないのにスルーした可能性も判断できません。調べ方もスキルのうちなので、そこをきちんと書いておくことで、ほしい情報にアクセスするためにはどういう調べ方をすると良いのかをアドバイス得られます。自分で解決できたらそれが一番早いですよね？
質問は編集できますので追記してください
ご指摘ありがとうございます。
検索したワードを追加しました。
更に調べて見ます。
私が理解できてないかもしれませんので確認です。
>タブの切り替わりと同時にスクロールも動いてしまいます。
タブ切り替えのコードとうまくやれば#あっても同居できるのではないかという気がしました。
タブ切り替え含めて現在のコードを提示されたほうが良いかもしれません。
場合によってはセレクタ追加するだけで解決する可能性もあります。
同時にスクロールするもので結構ですので現在のコードを提示いただけますか？
ご返信有り難うございます。
一部ですが現在のコードを提示いたしました。
<a onClick="ChangeTab('tab001'); return false;" class="t01" href="#tab001">
こちらで#を使用するため、スクロールしてしまいます。
あの、できればコードはマークダウンを。ベタで置かれると行頭が詰まっていたりして正しくコードをコピペできませんので。
あと勘違いしてたかもしれません。
タブ切り替えの時にスクロールをさせたくないということですよね？
調べ方とか見てると別の方法でスクロールさせる方法を探っているように見えます
提示コードで「タブの切り替わりと同時にスクロールも動いてしま」うのが再現できませんでした。
コードの確認と jQuery のバージョン、使っているブラウザを書いてもらえますか？
ご返信ありがとうございます。
>タブ切り替えの時にスクロールをさせたくないということですよね？
そうです！ 文章がわかりづらく申し訳ございません。。
また、マークダウンを知らなくて勉強不足で重ね重ね申し訳ありません。
マークダウンについては↓
https://teratail.com/help#about-markdown
>そうです！
では文章は修正しておいていただけると。
おそらくその要件だと現在ついてる回答が合わないものになってしまっています。(回答者さんに一言伝えておいたほうが良いですね)
いろいろとご回答をいただきまして、ありがとうございます。
関連した質問内の
スムーススクロールとTABの併用
から解決できました！
次回からはもっと分かりやすく詳しく記載するように心がけます。
了解です。解決されたようで何よりです。
自身で解決方法を回答として記載し、自己解決とするか、
もし、root_jpさんの回答がヒントとなったのでしたらそちらに具体的にどう実装して解決になったかコメントをしてあげてください。
ただ、また質問する機会はあるかもしれませんし、マークダウンのcode機能は今のうちに練習して覚えておきましょう。
基本的にはコード部分を選択し<code>ボタンを押すか、先に<code>ボタンを押してブロックを挿入しておき
ここに言語を入力 →HTMLなど言語名に変更
コード →実際のコードに置き換え
するだけです。
回答1件
0
JavaScriptのscrollToなどを使っても動かせますよ。
動かしたい位置のDOM要素の座標を取得して、scrollToでその位置を指定する感じです。
投稿2020/01/16 06:55
総合スコア4666
あなたの回答
tips
プレビュー
