OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.6885134
  • 閲覧数571
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 59% (101/170)

フェード効果を追加したページ内リンクをクリックすると、上に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">1を表示</a>
<a href="#text2">2を表示</a>
<a href="#text3">3を表示</a>
</div>
<hr>

<div id="text1"><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p><p>1111111111111111111111</p></div>
<div id="text2"><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p></div>
<div id="text3"><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p><p>333333</p></div>



上記の内容で、リンクをクリックすると切り替わったと同時に、上に戻ってしまいます。
見たところ、ランダムではなく、一定の箇所まで戻るといった感じでした。
これを直すにはどうすればいいでしょうか?
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

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

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

例えば、ご提示のソースの後ろに
 <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)最初に表示していた部分(スクロールの量を)覚えておいて、最後に、同じ位置
 を表示するように全体をスクロールする処理を追加する。

などなど。
とりあえず、思いつくのはこんなところでしょうか。
-PR-
-PR-
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ