使用jQuery手风琴控件,如何让它滚动到我在屏幕外时选择的项目?
当:
手风琴是否有选项可以滚动到第二个项目?
答案 0 :(得分:22)
它适用于我并经过测试,
$( "#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');
}
}
});
答案 1 :(得分:20)
您可以尝试使用scrollTo jQuery plugin。它可以让你做这样的事情:
$.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
答案 2 :(得分:11)
因为我想要崩溃是真的,我添加了一个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);
}
});
});
答案 3 :(得分:8)
我知道这个问题已经过时了,但上述情况都不符合我的要求。这就是我完成它的方式。 -50只是为了防止它出现在iPad或iPhone的webapp中,这样页面就不会滚动状态栏后面的手风琴标题的顶部。
$('#accordion').accordion({
collapsible: true,
autoHeight: false,
animated: false
});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
答案 4 :(得分:3)
请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);
}
}
});
答案 5 :(得分:1)
当您使用手风琴点击关闭功能时,我遇到了绑定事件的问题。只添加一个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
});
答案 6 :(得分:1)
马丁的解决方案效果很好。但是,当您添加此代码时,无论您的手风琴是否在页面上可见,它都将始终滚动到顶部。
如果您只想在手风琴内容大于可视窗口时滚动到顶部,请使用下一个代码:
$(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);
}
}
});
});
答案 7 :(得分:0)
<script type="text/javascript">
$(function(){
$('#youraccordionheader').click(function(){
$.scrollTo(this)
})
});
</script>
希望它对某人有用。
答案 8 :(得分:0)
我实现了第一个答案并且最喜欢这个选项,因为它是所有手风琴面板的一个功能。但是,我注意到我在尝试(重新)关闭同一个手风琴面板时仍然遇到错误 - 它会在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;
}
}
答案 9 :(得分:0)
只需在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");
},
});
});
完美的工作
答案 10 :(得分:0)
没有必要使用scrollTo插件,你可以这样做:
$('.accordionNormalitzador').bind('accordionactivate', function(event, ui) {
$( ui.newHeader )[0].scrollIntoView();
});