javascript - JQuery UI タブが原因で画面が「ジャンプ」する

Question

jQuery UI tabsの最新バージョンを使用しています。ページの下部にタブを配置しました。

タブをクリックするたびに、画面が上に向かってジャンプします。

どうすればこれを防ぐことができますか?

次の例を参照してください。

http://5bosses.com/examples/tabs/sample_tabs.html

score 75 · Accepted Answer

タブトランジションをアニメーション化している場合 (.tabs({ fx: { opacity: 'toggle' } });例: )、何が起こっているかは次のとおりです。

ほとんどの場合、ジャンプはブラウザが「#」リンクをたどったことが原因ではありません。ページがジャンプするのは、アニメーションの 2 つのタブペイン間の中間点で、両方のタブペインが完全に透明で非表示になっているため (display: none のように)、タブセクション全体の有効な高さが瞬間的にゼロになるためです。

また、高さゼロのタブ付きセクションによってページが短くなる場合、実際には (一時的に) 短いコンテンツに合わせてサイズを変更しているだけなのに、それを補うためにページが跳ね上がっているように見えます。理にかなっていますか？

これを修正する最善の方法は、タブ付きセクションの高さを固定することです。これが望ましくない場合 (タブのコンテンツの高さが異なるため)、代わりにこれを使用します。

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

タブ遷移の前に計算されたペインの高さを設定します。新しいタブが表示されると、高さは「auto」に戻されます。オーバーフローは「非表示」に設定され、短いタブから高いタブに移動するときにコンテンツがペインからはみ出さないようにします。

これが私のために働いたものです。お役に立てれば。

score 15 · Accepted Answer

これらの線に沿ったものがある場合:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

return false;タブのアクティブ化コマンドの後に追加してみてください:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

score 5 · Accepted Answer

私はこれに対する解決策を与えられました...

タブがクリックされたときに画面がジャンプするのを防ぐ方法：

タブを含むdivを固定の高さのdivでラップします。

こちらの例をご覧ください：http：//5bosses.com/examples/tabs/sample_tabs.html

score 5 · Accepted Answer

私の推測では、タブ遷移をアニメーション化していますか? クリックするたびにページスクロールがトップに戻るという同じ問題が発生しています。

jqueryソースでこれを見つけました：

 // Show a tab, animation prevents browser scrolling to fragment,

案の定、これがあれば：

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

私のコードは一番上にジャンプして面倒です (しかし、アニメーションがあります)。これを次のように変更すると:

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

タブのアニメーションはありませんが、タブの切り替えはスムーズです。

スクロールバックする方法を見つけましたが、タブをクリックした後もブラウザが上部にジャンプするため、適切な修正ではありません。イベント tabsselect と tabsshow の間でスクロールが発生するため、次のコードはタブに戻ります。

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

進捗があればまた投稿します。

score 4 · Accepted Answer

私はjquery uiのメニューで同じ問題を抱えていました - アンカーのクリックイベントの preventDefault() は、ページがスクロールして一番上に戻るのを止めます:

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });

score 4 · Accepted Answer

Mike のソリューションは原理を大いに実証しましたが、大きな欠点があります。結果のページが短い場合、とにかく画面が一番上にジャンプします! 唯一の解決策は、scrollTop を覚えておき、タブが切り替えられた後に元に戻すことです。ただし、復元する前に、ページ (html タグ)を適切に拡大します。

(編集 - 新しい Jquery UI API 用に変更 + 大きなページの小さな改善)

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

エフェクトにfxも対応。

score 3 · Accepted Answer

を使ってみてくださいevent.preventDefault();。タブを切り替えるクリックイベント。私の関数は次のようになります。

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });

score 2 · Accepted Answer

cssを使用して最小の高さを各タブのコンテンツ領域（タブ自体ではなく）に追加してみてください。それは私のためにそれを修正しました。:)

score 2 · Accepted Answer

ご協力いただきありがとうございます。良い提案ですが、以前に試してみましたが、うまくいきませんでした。JQuery UI が私の努力を覆している可能性があると思います。

タブごとのコードは次のとおりです。

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

私はすでにこれを試しましたが成功しませんでした:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

これは簡単な例です (false を返さない): http://5bosses.com/examples/tabs/sample_tabs.html

他の提案はありますか？

score 1 · Accepted Answer

ユーザーをどこにも連れて行かないリンクに href="#" を含めることを好みますが、onclick="return false;" を追加する限り、これを行うことができます。重要なのは、ユーザーを「#」に送信しないことだと思います。ブラウザによっては、現在のページのトップとしてデフォルトで表示されるようです。

score 1 · Accepted Answer

このページのコメントから発見したはるかに簡単な方法があります。これは、単に href="#" を削除するだけで、もうトップにジャンプしません! 私は確認しましたが、それは私にとってはうまくいきます。乾杯

score 1 · Accepted Answer

> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

ご協力いただきありがとうございます！他に見つけたものを教えてください。

上記の機能は機能します (画面は永続的に移動しません)... しかし、クリックすると画面が非常にぐらつきます。

以下は、タブをクリックすると画面が上部にジャンプする方法を示す簡単な例です (上記のコードは使用しません): http://5bosses.com/examples/tabs/sample_tabs.html

アニメーションは使用されていないことに注意してください。

score 0 · Accepted Answer

私の場合、タブhref=#example1が原因でページがの位置にジャンプしていることがわかりましたid。タブに固定の高さを追加しても違いはなかったので、追加しました：

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

score 0 · Accepted Answer

私は同じ問題を抱えていました。さらに、私のものは自分で回転していたので、ページの一番下にいると、ブラウザウィンドウが一番上までスクロールされました. タブコンテナの高さを固定するとうまくいきました。奇妙なことに、ウィンドウまたはタブを離れて戻ると、まだスクロールします。しかし、世界の終わりではありません。

score 0 · Accepted Answer

0

href="#" を href="javascript:void(0);" に置き換えます。「a」要素で

100% 動作します

于 2010-08-25T08:40:19.217 に答える

score -2 · Accepted Answer

-2

試しましたか：

fx: {opacity:'toggle', duration:100}

于 2010-10-04T12:58:41.113 に答える

javascript - JQuery UI タブが原因で画面が「ジャンプ」する

17 に答える 17

Related

Reference