web-dev-qa-db-ja.com

jQuery Accordion-開いているアイテムの上部までスクロールしますか？

JQueryアコーディオンコントロールを使用して、画面外にあるときに選択したアイテムにスクロールさせるにはどうすればよいですか？

いつ：

  • 表示可能なウィンドウより大きいコンテンツのアコーディオンアイテムがあります
  • 2番目のアコーディオン項目までスクロールします
  • 2番目のアコーディオンアイテムをクリックして表示します
  • 最初のアコーディオンオプションが折りたたまれ、2番目のオプションが開きますが、画面からスライドします。

アコーディオンが2番目のアイテムにスクロールするオプションはありますか？

jqueryaccordion
28
y0mbo

scrollTo jQueryプラグイン を使用して試すことができます。次のようなことができます。

_$.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
_

次のように、ScrollTo()をaccordionactivateイベントにバインドします。

_$('#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
});
_

accordionactivateイベントはいつトリガーされますか？

パネルがアクティブになった後（アニメーションの完了後）にトリガーされます。アコーディオンが以前に折りたたまれていた場合、_ui.oldHeader_および_ui.oldPanel_は空のjQueryオブジェクトになります。アコーディオンが折りたたまれている場合、_ui.newHeader_および_ui.newPanel_は空のjQueryオブジェクトになります。

参照： jQuery UI Accordion

20
Ken Redler

それは私のために働いてテストされました、

$( "#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/

22
iliyas Safi

折りたたむことを望んでいるので、折りたたまれているすべてのアイテムのエラーをキャンセルするifテストを追加しました。また、ヘッダーをページの最上部に正確に配置したくないため、scrollTopの位置を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);
      }
    });
  });
11
Martin

私はこの質問が古いことを知っていますが、上記のどれも私が望んでいた通りには働きませんでした。これは私がそれを達成した方法です。 -50は、これがiPadまたはiPhoneのWebアプリに表示され、ページがステータスバーの後ろのアコーディオンヘッダーの上部をスクロールしないようにするためのものです。

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

this を参照してください 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
    });
});

上記の変更で私のために働いています。

$("#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);
                        }
                    }
                });
3
Pranav Labhe

マーティンのソリューションは非常に効果的です。ただし、このコードを追加すると、アコーディオンがページに表示されているかどうかに関係なく、常に上部にスクロールします。

アコーディオンのコンテンツが表示可能なウィンドウよりも大きい場合にのみ上部にスクロールする場合は、次のコードを使用します。

$(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);
        }
      }
    });
  });
1
Stan Kroshchenko

アコーディオンのクリックして閉じる機能を使用したときに、イベントのバインドに問題がありました。単一のifステートメントを追加するだけで、考えが修正されました。

$('#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
});
1
carcus88

最初の回答を実装しましたが、このオプションはすべてのアコーディオンパネルの1つの機能であるため、このオプションが最も気に入りました。しかし、同じアコーディオンパネルを（再）閉じようとするとエラーが発生し続けることに気付きました。ScrollToプラグインの次の行でスクリプトが停止します。

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

Valは空を返していたので、ここで別の答えを見つけて、空をチェックしてこの関数を追加/置換するように言ったので、今は動作します。

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

ScrollToプラグインは不要です。次のようにできます。

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

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



    });

    });

完全に働く

0
adnan dogar

ちょっと同じ問題がありました。少なくとも私にとっては、最も簡単な方法と思われたものがここにあります。 scrollToプラグインを使用します。

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

それが誰かのために役立つかもしれないことを願っています。

0
cris