simple - jQuery Accordion: ¿se desplazará hasta la parte superior del elemento abierto?

panel colapsable jquery

Question

Con el control de acordeón jQuery, ¿cómo puedo hacer que se desplace a un elemento que he seleccionado cuando está fuera de la pantalla?

Cuando:

• Tengo un elemento de acordeón con un contenido más grande que la ventana visible
• Me desplazo hasta el segundo elemento de acordeón
• Hago clic en el segundo elemento de acordeón para mostrarlo.
• La primera opción de acordeón se colapsa, y la segunda se abre, pero se desliza fuera de la pantalla.

¿Hay una opción para que el acordeón se desplace al segundo elemento?

Answer 1

Como deseo que el colapso sea verdadero, agregué una prueba if para cancelar el error de todos los elementos que se colapsaron. Tampoco quería que el encabezado estuviera exactamente en la parte superior de la página, así que reduje la ubicación scrollTop en 100:

  $(document).ready(function() {
    $(".ui-accordion").bind("accordionchange", function(event, ui) {
      if ($(ui.newHeader).offset() != null) {
        ui.newHeader, // $ object, activated header
        $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);
      }
    });
  });

Answer 2

Funciona para mí y probado,

$( "#accordion" ).accordion({
    heightStyle: "content",
    collapsible: true,
    active: false,
    activate: function( event, ui ) {
        if(!$.isEmptyObject(ui.newHeader.offset())) {
            $(''html:not(:animated), body:not(:animated)'').animate({ scrollTop: ui.newHeader.offset().top }, ''slow'');
        }
    }
});

http://jsfiddle.net/ilyasnone/aqw613em/

Answer 3

Implementé la primera respuesta y esta opción me gustó más porque es una función para todos los paneles de acordeón. Sin embargo, noté que seguí recibiendo un error al intentar (re) cerrar el mismo panel de acordeón; esto detendría la secuencia de comandos en esta línea en el complemento ScrollTo:

attr[key] = val.slice && val.slice(-1) == ''%'' ? 

La válvula estaba regresando vacía, por lo que encontré otra respuesta aquí que decía que buscarla vacía y que agregue / reemplace esta función, por lo que ahora funciona.

else{
var val = targ[pos];
// Handle percentage values
if(val) {
    attr[key] = val.slice && val.slice(-1) == ''%'' ?
    parseFloat(val) / 100 * max
    : val;
    }
}

Answer 4

La solución de Martin funciona muy bien. Sin embargo, cuando agrega este código, siempre se desplazará a la parte superior, sin importar si su acordeón es visible en la página o no.

Si desea desplazarse a la parte superior solo cuando su contenido de acordeón es más grande que la ventana visible, use el siguiente código:

$(document).ready(function() {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(".accordion-inner").bind("accordionchange", function(event, ui) {
      if ($(ui.newHeader).offset() != null) {
        if (!isScrolledIntoView(ui.newHeader))
        {
            ui.newHeader, // $ object, activated header
            $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);
        }
      }
    });
  });

Answer 5

No es necesario scrollTo plugin, puedes hacer eso:

$(''.accordionNormalitzador'').bind(''accordionactivate'', function(event, ui) {
        $( ui.newHeader )[0].scrollIntoView(); 
    });

Answer 6

Oye tenía el mismo problema. Aquí es lo que funcionó para mí, al menos lo que parece la forma más fácil. Usando el plugin scrollTo.

<script type="text/javascript">
    $(function(){
        $(''#youraccordionheader'').click(function(){
            $.scrollTo(this)                                                 
        })
    });
</script>

Espero que pueda ser de utilidad para alguien.

Answer 7

Por favor refiérase this respuesta por techfoobar

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300 // collapse will take 300ms
    });
    $(''#accordion h3'').bind(''click'',function(){
        var self = this;
        setTimeout(function() {
            theOffset = $(self).offset();
            $(''body,html'').animate({ scrollTop: theOffset.top - 100 });
        }, 310); // ensure the collapse animation is done
    });
});

Está trabajando para mí con la modificación anterior.

$("#accordion").accordion({
                    heightStyle: "content",
                    collapsible: true,
                    activate: function (event, ui) {

                        try
                        {
                            var self = this;
                            theOffset = $(self).offset();
                            $(''body,html'').animate({ scrollTop: theOffset.top - 100 });
                        } catch (e) {
                            alert(e);
                        }
                    }
                }); 

Answer 8

Puedes intentar usar el plugin scrollTo jQuery . Te permite hacer cosas como esta:

$.scrollTo(''div#foo''); // scroll the browser window so div#foo is in view
$(''div#foo'').(''#bar''); // scroll within div#foo so #bar is in view

Enlazar ScrollTo() al evento ScrollTo() , como este:

$(''#youraccordion'').bind(''accordionactivate'', function(event, ui) {
  /* In here, ui.newHeader = the newly active header as a jQ object
              ui.newContent = the newly active content area */
  $( ui.newHeader ).ScrollTo(); // or ui.newContent, if you prefer
});

¿Cuándo se desencadena el evento accordeonato?

Se activa después de que se haya activado un panel (después de que se complete la animación). Si el acordeón se colapsó previamente, ui.oldHeader y ui.oldPanel serán objetos jQuery vacíos. Si el acordeón está colapsando, ui.newHeader y ui.newPanel serán objetos jQuery vacíos.

Referencias: jQuery UI Accordion

Answer 9

Sé que esta pregunta es antigua, pero ninguna de las anteriores me funcionó como deseaba. Así es como lo logré. El -50 fue solo en caso de que apareciera en una aplicación web para iPad o iPhone, de modo que la página no se desplace por la parte superior del encabezado de acordeón detrás de la barra de estado.

$(''#accordion'').accordion({
  collapsible: true,
  autoHeight: false,
  animated: false
});
$(''.ui-accordion-header'').bind(''click'',function(){
    theOffset = $(this).offset();
    $(window).scrollTop(theOffset.top - 50);
});

Answer 10

Simplemente usa esta función en window.load

$(function() {
    var icons = {
    header: "ui-icon-circle-plus",
    activeHeader: "ui-icon-circle-minus"
    };
    $( "#accordion" ).accordion({
    icons: icons, autoHeight: false, collapsible: true, active: false,
    activate: function(event, ui){
        var scrollTop = $(".accordion").scrollTop();
        var top = $(ui.newHeader).offset().top;
     //do magic to scroll the user to the correct location

     //works in IE, firefox chrome and safari
        $("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast");
       },



    });

    });

trabajo perfecto

Answer 11

Tuve problemas para vincular el evento cuando usaste el acordeón clic para cerrar la función. Añadiendo solo una sentencia if si se arreglaba el pensamiento.

$(''#accordion'').bind(''accordionchange'', function(event, ui) {
    if(!ui.newHeader.length) { return; }
  /* In here, ui.newHeader = the newly active header as a jQ object
              ui.newContent = the newly active content area */
  $.scrollTo( ui.newHeader ); // or ui.newContent, if you prefer
});