1

jqueryアコーディオン（モバイルサイト用）を使用してコンテンツを表示する一連のボタンがあります。ユーザーが他のボタンを選択すると、選択されたボタンの一番上までスクロールするのが最善の方法だろうかと思います。

アコーディオンスクリプト用に現在持っているものは次のとおりです。

$( "#accordion" ).accordion({
        collapsible: true,
        active: false, 
        autoHeight: false,
        clearStyle: true
    });
});

私もこのフィドルを作成しましたが、モバイルデバイスで表示した場合のようには機能しません（ウィンドウ/ビューポート領域のサイズを変更しない限り、モバイルデバイスの場合と同じように機能します）。

4

1 に答える 1

1

この関連する質問を見つけました。

コメントによると、これは「すべての主要なブラウザーでサポートされてelement.scrollIntoView()いる」ため、アクティブな要素に使用できます。

同じことを行うjqueryプラグイン（3番目の回答）への言及もあります。

changeアコーディオンのイベントにバインドすると、次のように動作するはずです。

$('#myaccordion').accordion({
  // .. other options
  change: function(event, ui) {
            ui.newHeader.scrollIntoView(); // or scrollintoview(), 
                                           // if you're using the plugin
          }
});

私はどちらのソリューションも試していませんが、いずれかが機能する場合はコメントを投稿できますか?

編集

質問を読み直した後、通常、押すボタンはすでに表示されているため、関数/プラグインは必要ないように思わscrollIntoViewれました（どのように押したのでしょうか...）。

そのため、window.scroll(または使用するスクロール可能なトップレベル コンテナー) をそのまま使用できます。

あなたのjsfiddleの例に基づいて、次のように動作するようです:

    $( "#accordion" ).accordion({
        collapsible: true,
        active: false, 
        autoHeight: false,
        clearStyle: true,
        change: function(event, ui) {
            if (ui.newHeader) {
            var scrollTop = ui.newHeader.position().top;
            window.scroll(0,scrollTop);
            }
        }
    });
于 2012-07-17T15:46:14.327 に答える