JQueryアコーディオンコントロールを使用して、画面外にあるときに選択したアイテムにスクロールさせるにはどうすればよいですか?
いつ:
アコーディオンが2番目のアイテムにスクロールするオプションはありますか?
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オブジェクトになります。
それは私のために働いてテストされました、
$( "#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');
}
}
});
折りたたむことを望んでいるので、折りたたまれているすべてのアイテムのエラーをキャンセルする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);
}
});
});
私はこの質問が古いことを知っていますが、上記のどれも私が望んでいた通りには働きませんでした。これは私がそれを達成した方法です。 -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);
});
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);
}
}
});
マーティンのソリューションは非常に効果的です。ただし、このコードを追加すると、アコーディオンがページに表示されているかどうかに関係なく、常に上部にスクロールします。
アコーディオンのコンテンツが表示可能なウィンドウよりも大きい場合にのみ上部にスクロールする場合は、次のコードを使用します。
$(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);
}
}
});
});
アコーディオンのクリックして閉じる機能を使用したときに、イベントのバインドに問題がありました。単一の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つの機能であるため、このオプションが最も気に入りました。しかし、同じアコーディオンパネルを(再)閉じようとするとエラーが発生し続けることに気付きました。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;
}
}
ScrollToプラグインは不要です。次のようにできます。
$('.accordionNormalitzador').bind('accordionactivate', function(event, ui) {
$( ui.newHeader )[0].scrollIntoView();
});
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");
},
});
});
完全に働く
ちょっと同じ問題がありました。少なくとも私にとっては、最も簡単な方法と思われたものがここにあります。 scrollToプラグインを使用します。
<script type="text/javascript">
$(function(){
$('#youraccordionheader').click(function(){
$.scrollTo(this)
})
});
</script>
それが誰かのために役立つかもしれないことを願っています。