jQueryでページ内リンクに誤差が出る。

質問

フェード効果を追加したページ内リンクをクリックすると、上に300px程ずれてしまうエラーがでてしまいます。

これを解決するにはどうすればいいでしょうか？

http://code.jquery.com/jquery-1.6.2.jsを使用

* javascript *************

(function($){
var speed = 300,
　　active = "actve",
　　n_active = ":not(." + active + ")",
　　getTarget = function(elm){
　　　var h, r = $("");
　　　elm.each(function(){
　　　　if(h=$(this).attr("href").match(/#.+$/)) r = r.add(h[0]);
　　　});
　　　return r;
　　};

$.fn.extend({
　changer : function(){
　　var t = $(this).children("a");
　　getTarget(t.filter(n_active)).hide();
　　t.click(function(){
　　　var elm, func, t = $(this);
　　　getTarget(t.parent().children("a")).queue([]).stop(1,1);
　　　func = function(){
　　　　getTarget(t.addClass(active)).fadeIn(speed);
　　　};
　　　elm = getTarget(t.siblings("."+active).removeClass(active));
　　　if(elm.length) elm.fadeOut(speed, func); else func();
　　　return false;
　　});
　}
});
})(jQuery);

$(function(){
　$("#group1").changer();
});

* html *************
<div style="padding:500px 0 500px;">余白用</div>

<div id="group1">
<a href="#text1" class="actve">１を表示</a>
<a href="#text2">２を表示</a>
<a href="#text3">３を表示</a>
</div>
<hr>

<div id="text1"><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p></div>
<div id="text2"><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p></div>
<div id="text3"><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p></div>

上記の内容で、リンクをクリックすると切り替わったと同時に、上に戻ってしまいます。
見たところ、ランダムではなく、一定の箇所まで戻るといった感じでした。
これを直すにはどうすればいいでしょうか？

回答No.1

fujillin · ベストアンサー

どうやら、私の回答だったような…

最初は、ページ内リンクをキャンセルし忘れてブラウザがスクロールしているのかと思いましたが、ちゃんとキャンセルはされているみたいですね。
タブのコンテンツの後ろに、他のコンテンツがあればご指摘のようなスクロールは起こりません。

例えば、ご提示のソースの後ろに
　<div style="height:500px;">続き</div>
のようなものがあれば、ご指摘のスクロールはおこらないと思います。

原因は、fadeOutしてからfadeInしているので、fadeOutした時に瞬間的にタブコンテンツ表示部分の高さが0になるため、ブラウザはそこをページの最後と判断してしまい、ご提示の例でいえば、<hr>の部分を画面の一番下にくるようにスクロールしてしまうためと思われます。
（その後で、表示部分が追加されても自動的にスクロールはしません）

＞これを直すにはどうすればいいでしょうか？
方法はいろいろあるかと思いますが、

1）現状では、タブコンテンツの表示部分の高さが可変になっていますが、
　　固定高さにして表示領域を確保しておく。
　　（ラッパーのdivの高さを確保しておくなど）
2）タブコンテンツの表示部分をposition:absoluteなどにしておいて、重ねて
　　表示する方式にし、activeな部分が上にくるようにしてfadeInしながら
　　それまでの表示要素をfadeOutする。
　　（現状に近い動作にするなら、fadeInをすぐに始めずにfadeOut終了に
　　　少し前にするとか…）
3）ラッパーのdivの高さを、タブ表示の内容（の高さ）に応じて、明示的に確保
　するような処理を追加し、fadeOut後fadeInを行なう（現在の順序）
　（高さの変更もアニメーションで行なうとか…）
4）最初に表示していた部分（スクロールの量を）覚えておいて、最後に、同じ位置
　を表示するように全体をスクロールする処理を追加する。

などなど。
とりあえず、思いつくのはこんなところでしょうか。