Les onglets de JQuery UI font "sauter" l'écran

Question

J'utilise la dernière version du Onglets jQuery UI . Les onglets sont positionnés vers le bas de la page.

Chaque fois que je clique sur un onglet, l'écran saute vers le haut.

Comment puis-je éviter que cela ne se produise ?

Veuillez consulter cet exemple :

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

Answer 1

Si vous animez les transitions de vos onglets (c'est-à-dire que vous ne pouvez pas les modifier), vous pouvez utiliser la fonction d'animation. .tabs({ fx: { opacity: 'toggle' } }); ), alors voici ce qui se passe :

Dans la plupart des cas, le saut n'est pas causé par le navigateur qui suit le lien "#". La page saute parce qu'à mi-chemin de l'animation entre les deux volets d'onglets, les deux volets d'onglets sont totalement transparents et cachés (comme dans display : none), de sorte que la hauteur effective de toute la section à onglets devient momentanément nulle.

Et si une section à onglets de hauteur nulle entraîne un raccourcissement de la page, celle-ci semblera se redresser pour compenser, alors qu'en réalité elle est simplement redimensionnée pour s'adapter au contenu (momentanément) plus court. Cela vous paraît logique ?

La meilleure façon de résoudre ce problème est de définir une hauteur fixe pour la section à onglets. Si cela n'est pas souhaitable (parce que le contenu de vos onglets varie en hauteur), utilisez plutôt ceci :

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');
    }
});

Il définira la hauteur calculée du volet avant la transition de l'onglet. Une fois que le nouvel onglet est apparu, la hauteur est remise à 'auto'. Le débordement est défini sur "hidden" pour éviter que le contenu ne sorte du volet lors du passage d'un onglet court à un onglet plus grand.

C'est ce qui a marché pour moi. J'espère que cela vous aidera.

Answer 2

Si vous avez quelque chose de ce genre :

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

Essayez d'ajouter return false; après la commande d'activation de l'onglet :

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

Answer 3

On m'a donné une solution pour cela...

Comment empêcher l'écran de sauter vers le haut lorsque l'on clique sur l'onglet :

Enveloppe la div qui contient les onglets dans une div de hauteur fixe.

Voir l'exemple ici : http://5bosses.com/examples/tabs/sample_tabs.html

Answer 4

Je suppose que vous animez les transitions de vos onglets ? J'ai le même problème, où le défilement de la page revient en haut à chaque clic.

J'ai trouvé ceci dans la source de jquery :

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

Bien sûr, si j'ai ça :

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

mon code saute en haut et est gênant (mais il y a de l'animation). Si je le change en ceci :

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

il n'y a pas d'animation des onglets, mais le passage d'un onglet à l'autre est fluide.

J'ai trouvé un moyen de le faire défiler en arrière, mais ce n'est pas une bonne solution, car le navigateur saute toujours en haut après avoir cliqué sur un onglet. Le défilement se produit entre les événements tabsselect et tabsshow, donc le code suivant permet de revenir à votre onglet :

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);
});

Je posterai tout progrès supplémentaire que je ferai.

Answer 5

La solution de Mike a bien démontré le principe mais elle a un gros inconvénient : si la page résultante est courte, l'écran sautera en haut de toute façon ! La seule solution consiste à se souvenir du scrollTop, et le restaurer après que les onglets aient été échangés. Mais avant la restauration, agrandir la page (balise html) de manière appropriée :

(edit - modifié pour la nouvelle API Jquery UI + petite amélioration pour les grandes pages)

$(...).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
    }
});

Fonctionne avec le fx effet aussi.