Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery-Accordion Как сделать скроллинг на открытую вкладку? (https://javascript.ru/forum/jquery/58195-jquery-accordion-kak-sdelat-skrolling-na-otkrytuyu-vkladku.html)

lipinart 09.09.2015 09:04

jQuery-Accordion Как сделать скроллинг на открытую вкладку?
 
Как сделать скроллинг на открытую вкладку?
Пробовал получить позицию текущей вкладки и скроллить до неё, но почему-то не работает.


$(document).ready(function(){
	$(".set > a").on("click", function(){
		if($(this).hasClass('active')){
			$(this).removeClass("active");
			$(this).siblings('.content').slideUp(200);
			
		}else{
			$(".set > a").removeClass("active");
			$(this).addClass("active");
			$('.content').slideUp(200);
			$(this).siblings('.content').slideDown(200);
		}
		var scrTop = $(this).offset().top;// получаем положение вкладки
		$(document).scrollTop(scrTop); // пытаюсь скроллить на это значение
	});
	$(".set > a.activity").click();// одна вкладка открыта по умолчанию, имитация клика.
});


Разметка:
<div class="accordion-container" role="tablist" aria-multiselectable="true">
	<div class="set">
		<a role="button" href="#">Panel header 1</a>
		<div class="content" role="tab">
			<p>Panel text</p>
		</div>
	</div>
	<div class="set">
		<a role="button" href="#">Panel header 2</a>
		<div class="content" role="tab">
			<p>Panel text</p>
		</div>
	</div>
	<div class="set">
		<a role="button" href="#">Panel header 3</a>
		<div class="content" role="tab">
			<p>Panel text </p>
		</div>
	</div>
</div>

рони 09.09.2015 09:24

lipinart,
1. отменить переход по ссылке.
2. строка 11 $(this).siblings('.content').slideDown(200 сюда ваш скролинг);

lipinart 09.09.2015 09:50

Да, заподозрил анкеры. Сделал как посоветовали:
$(document).ready(function(){
	$(".set > a").on("click", function(event){
		event.preventDefault();
		if($(this).hasClass('active')){
			$(this).removeClass("active");
			$(this).siblings('.content').slideUp(200, function(){
			});
			
		}else{
			$(".set > a").removeClass("active");
			$(this).addClass("active");
			$('.content').slideUp(200);
			$(this).siblings('.content').slideDown(200);
		}
	});
	$(".set > a.activity").click();
});


В итоге скроллить ничего не пришлось, все остается на своих местах. Спасибо!


Часовой пояс GMT +3, время: 16:23.