С помощью jQuery-регулятора аккордеона, как я могу его прокрутить до элемента, который я выбрал, когда он выключен?
Когда:
Есть ли опция для аккордеона прокручиваться во второй элемент?
Вы можете попробовать использовать 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
Он работает для меня и тестируется,
$( "#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 webapp, чтобы страница не прокручивала верхнюю часть заголовка аккордеона за панель состояния.
$('#accordion').accordion({
collapsible: true,
autoHeight: false,
animated: false
});
$('.ui-accordion-header').bind('click',function(){
theOffset = $(this).offset();
$(window).scrollTop(theOffset.top - 50);
});
Пожалуйста, напишите этот ответ 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);
}
}
});
У меня были проблемы с привязкой события, когда вы использовали аккордеон, чтобы закрыть функцию. Добавляя только одно утверждение 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
});
Решение от Мартина отлично работает. Однако, когда вы добавляете этот код, он всегда будет прокручиваться вверх, независимо от того, отображается ли ваш аккордеон на странице или нет.
Если вы хотите прокручивать вверх, только когда ваш контент аккордеона больше окна просмотра, используйте следующий код:
$(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);
}
}
});
});
У него была такая же проблема. Вот что сработало для меня, по крайней мере, что кажется самым простым способом. Использование плагина scrollTo.
<script type="text/javascript">
$(function(){
$('#youraccordionheader').click(function(){
$.scrollTo(this)
})
});
</script>
Надеюсь, что это может быть полезно для кого-то.
Я реализовал первый ответ и понравился этот вариант лучше всего, потому что это одна функция для всех панелей аккордеона. Но я заметил, что при попытке (повторной) закрытии одной и той же панели аккордеона я продолжал получать ошибку - он остановил бы script в этой строке в плагине 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;
}
}
Просто используйте эту функцию на 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");
},
});
});
perfectl wokring
Не нужно прокручивать плагин, вы можете сделать это:
$('.accordionNormalitzador').bind('accordionactivate', function(event, ui) {
$( ui.newHeader )[0].scrollIntoView();
});