JQueryタブのアクティブ アンカーポイントまでスクロール

はじめまして。jquery初心者ため宜しくお願いします。

下記ページのjqueryプラグインを使いタブを作成し、別ページからコンテンツ内の指定したアンカーポイントまでのリンクをしたいのですが上手くいきません。


https://css-tricks.com/organic-tabs/


タブは3つにわかれており、各コンテンツにはそれぞれ10個の<li></li>要素が記述、<li>それぞれにアンカーを張り別ページからそこにダイレクトリンク→移動→アンカーまでスクロールをさせたいという考えです。

過去似たようなQ&Aを見つけそちらを参考にjqueryを記述したところ、タブのアクティブとulのid指定したコンテンツ頭部分までのスクロールはできましたが要素<li>への移動は色々試してもできませんでした。

説明が下手ですいません。<li>へ移動させるにはどのような記述に変更をすればよいのでしょうか？
またこちらのタブを使用してこのような動作は可能なのでしょうか？
ご教授頂けますと幸いです。宜しくお願いします。

現在のhtml、scriptは以下のようになっています。

<index.html> <!-- リンク元の別ページ -->

　 <p><a href="detail.html#anker1">アンカーポイント1へ移動</a></p>
<p><a href="detail.html#anker2">アンカーポイント2へ移動</a></p>
<p><a href="detail.html#anker3">アンカーポイント3へ移動</a></p>
:
:
実際にはリンク先の<li>要素全てにアンカーを張る予定です。


<detail.html> <!-- リンク先のページ -->

<div id="example">

<ul class="nav">
<li class="nav-one"><a id="a-first" href="#first" class="current">1st</a></li>
<li class="nav-two"><a id="a-second" href="#second">2nd</a></li>
<li class="nav-three"><a id="a-third" href="#third">3rd</a></li>
</ul>

<div class="list-wrap">

<ul id="first">
<li>1st-内容1</li>
<li>1st-内容2</li>
<li>1st-内容3</li>
:
:
<li>1st-内容8</li>
<li id="anker1">アンカーポイント1 ここに移動したい</li>
<li>1st-内容10</li>
</ul>

<ul id="second" class="hide">
<li>2nd-内容1</li>
<li>2nd-内容2</li>
<li id="anker2">アンカーポイント2 ここに移動したい</li>
:
:
<li>2nd-内容9</li>
<li>2nd-内容10</li>
</ul>

<ul id="third" class="hide">
<li>3rd-内容1</li>
<li>3rd-内容2</li>
:
:
<li id="anker3">アンカーポイント3 ここに移動したい</li>
<li>3rd-内容9</li>
<li>3rd-内容10</li>
</ul>

　　</div> <!-- END List Wrap -->
</div> <!-- END (Example) -->


<script>
$(function() {
$("#example").organicTabs({
"speed": 200
});
var hash = location.hash.replace( /[^\w\-]/g, "" );
if( hash )
{
hash = "#a-" + hash;
$( hash ).trigger( "click" );
$( "html,body" ).animate({ scrollTop: $( hash ).offset().top }, "slow" );
}
});
</script>

No.1 ベストアンサー 回答者： fufufunofufufu 回答日時： 2016/04/15 11:58

こんにちは。

指定のプラグインは使ってないですが以下はどうでしょう。

HTMLは質問者様の提示したものに添っています。
不要クラスは削除したので、デザインで必要な場合は再度追加してください。

【HTML】
<div id="example">
<ul class="nav">
<li><a href="first" class="current">1st</a></li>
<li><a href="second">2nd</a></li>
<li><a href="third">3rd</a></li>
</ul>

<div class="list-wrap">

<ul id="first" >
<li>1st-内容1</li>
<li>1st-内容2</li>
<li>1st-内容3</li>
<li>1st-内容4</li>
<li>1st-内容5</li>
<li>1st-内容6</li>
<li>1st-内容7</li>
<li>1st-内容8</li>
<li id="anker1">アンカーポイント1 ここに移動したい</li>
<li>1st-内容10</li>
</ul>

<ul id="second" class="hide">
<li>2nd-内容1</li>
<li>2nd-内容2</li>
<li id="anker2">アンカーポイント2 ここに移動したい</li>
<li>2nd-内容9</li>
<li>2nd-内容10</li>
</ul>

<ul id="third" class="hide">
<li>3rd-内容1</li>
<li>3rd-内容2</li>
<li id="anker3">アンカーポイント3 ここに移動したい</li>
<li>3rd-内容9</li>
<li>3rd-内容10</li>
</ul>

</div> <!-- END List Wrap -->
</div> <!-- END (Example) -->
<p>スクロール確認用削除してください<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>




【CSS】
<style>
.hide{ display: none;}
.current{ background: #FF0;}
</style>

【jQuery】
<script>
$(function(){
var $tabs = $(".nav a");
var $content = $(".list-wrap ul");

//①基本のタブの挙動
$tabs.click(function() {
var num = $tabs.index(this);
$content.hide();
$content.eq(num).fadeIn(1000);
$tabs.removeClass('current');
$(this).addClass('current');
return false;
});
//②外部アンカーリンクから来た時の該当タブの表示関連
var p = location.hash;
var hashId = p.indexOf("#");
if(0 == hashId){
$content.hide();
$(p).parent("ul").show();
var num2 = $(p).parent("ul").index();
$tabs.removeClass('current');
$tabs.eq(num2).addClass('current');
}
//③該当タブを表示後に、アンカーへのスクロール
var p = location.hash;
var q = $(p).offset().top;
var hashId = p.indexOf("#");
if(0 == hashId){
$('html,body').animate({ scrollTop: q }, 'slow');
}

});
</script>


--------説明---------
jQueryのところにもコメント書いてますが、
①タブとコンテンツの基本の挙動をまず設置。プラグイン使わなくてもこれだけでタブは動きます。
②そして、外部からのアンカーリンクのときに、該当のタブとコンテンツがアクティブになっていないとダメなので、そのための挙動。
URLから#ハッシュを取得してその親要素の.list-wrap ulの表示と何番目の.list-wrap ulかを取得して、同じ番目の.nav aもアクティブにする。
③最後にアンカーリンクの該当箇所にスクロールします。

これで動くはずです。ちなみに①②③の順番は変えるとうまく行きません。

あともしかしたら、③はブラウザによってはうまくいかないかもしれないです。
アンカーリンクに飛ばすタイミングがブラウザによって違っているので、咬み合わないと、変な位置にアンカーしてしまうことがあります。IEとかfirefoxとか。
もしその場合は、③だけ$(function(){});から外して、javascriptの
window.onload = function() {--ここに記述--};で囲ってあげたほうがよいかもしれません。

がんばってください。

この回答へのお礼

fufufunofufufu様

解りやすく親切丁寧に教えて頂きありがとうございました！
まだ全て確認した訳ではありませんが、考えていた通りの動きで可動しているのを見て感動。すごい！

jQueryまだ全然わからない事だらけですけど、これを機にもっと勉強したいと思います。
本当にありがとうございました。

お礼日時：2016/04/16 08:33