Вертикальный скроллинг скрипта accordion на jquery

[vyrtime]

Привет! Подскажите как реализовать следующее:
Имеется скрипт - аккордеон на jquery:

$(document).ready(function(){
$(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
    .siblings("p:visible").slideUp("fast");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
    });
});

И следующая html структура:

<div class="accordion">
  <h3>Заголовок 1</h3>
  <p>
  Много много тектса...
  </p>
  <h3>Заголовок 2</h3>
  <p>
  Много много тектса...
  </p>
  <h3>Заголовок 3</h3>
  <p>
  Много много тектса...
  </p>
</div>

Как реализовать скроллинг(желательно плавный) при клике на <h3> заголовки
Т.е. когда кликаем на заголовки окно должно переместиться до заголовка <h3>
Надеюсь, суть понятна?

[ksa]

когда кликаем на заголовки окно должно переместиться до заголовка

Как вариант, меняй паддинг у accordion в зависимости от координат заголовка...

[vyrtime]

Видимо ты меня...или я тебя не совсем понял...нужно чтобы выполнялся вот такой механизм(клинуть тут) в аккордеоне при клике на заголовки...
я попытался всё это совместить и сделать вот так:

$(document).ready(function(){
  $("#accordion div").hide();
      $("#accordion h2").click(function(){
        $(this).next("div").slideToggle("slow")
        .siblings("div:visible").slideUp("fast");
        $(this).toggleClass("active");
        $(this).siblings("h2").removeClass("active");
      });
	});
	
	$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;
        if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }
        return false;
      });
    });

<div id="accrodion">
<h2 id="sec1"><a href="#sec1" class="ancLinks">Заголовок 1</a></h2><div>Много много текста...</div>
<h2 id="sec2"><a href="#sec2" class="ancLinks">Заголовок 2</a></h2><div>Много много текста...</div>
<h2 id="sec3"><a href="#sec3" class="ancLinks">Заголовок 3</a></h2><div>Много много текста...</div>
</div>

Но у меня ничего не вышло, вернее плавные переходы работают, но текст ниже заголовка(который в div'ах) не раскрывается, т.е. аккордеон перестает работать. Подозреваю что из за return false в скрипте плавных переходов, поскольку если убрать эту строчку то аккордеон работает а переходы уже нет как быть?

[vpisklov]

$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;

       $(this).parent().next("div").slideToggle("slow")
	        .siblings("div:visible").slideUp("fast");
	        $(this).parent().toggleClass("active");
	        $(this).parent().siblings("h2").removeClass("active");

        if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }
        else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }

        return false;
      });
});

попробуйте так...
если синтаксисом все правильно то должно работать...

Смысл такой: вы кликаете по ссылке получаете "якорь" и его положение сверху относительно окна браузера. далее выбираем родителя ссылки, переключаем класс, показываем следующий div, все остальные прячем и с остальных h2 убираем класс. ну и конечно-же прокручиваем страницу

[vyrtime]

спасибо, попробовал, но, к сожалению, не работает...

[vpisklov]

хм...сейчас бубен возьму

[vpisklov]

а что, собственно не работает? я потестил в фф 3.6.17 и ие7. у меня работает. может я что-то не понял?

[vyrtime]

при загрузке страницы все div'ы, в которых текст(под заголовками) - раскрыты(а у меня были скрыты), сама гармошка работает, но прокрутка страницы(при клике на заголовки) до заголовков не работает

[vpisklov]

1. Что бы все дивы были скрыты, дайте им через css свойство display: none;
2. для того, что бы отработала прокрутка необходимо, что бы у вас на странице отобразился скроллинг(т.е контентная часть была больше по высоте, чем окно), иначе браузер не сможет прокрутить то, чего нету
для теста попробуйте добавить много строк в ваши дивы

[vyrtime]

добавил много строк текста, но всё равно не работает прокрутка - при клике на заголовки ничего не происходит...
вот код js и структура html:

$(document).ready(function() {
      $("a.ancLinks").click(function () {
        elementClick = $(this).attr("href");
        destination = $(elementClick).offset().top;

     $(this).parent().next("div").slideToggle("slow")
       .siblings("div:visible").slideUp("fast");
       $(this).parent().toggleClass("active");
       $(this).parent().siblings("h2").removeClass("active");

       if($.browser.safari){
          $('body').animate( { scrollTop: destination }, 1100 );
        }
        else{
          $('html').animate( { scrollTop: destination }, 1100 );
        }

        return false;
      });
});

<div id="accrodion">
<h2 id="sec1"><a href="#sec1" class="ancLinks">Заголовок 1</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
<h2 id="sec2"><a href="#sec2" class="ancLinks">Заголовок 2</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
<h2 id="sec3"><a href="#sec3" class="ancLinks">Заголовок 3</a></h2>
<div style="display: none;">
Тут много строк текста
</div>
</div>

возможно у меня какая-то ошибка, может вы покажете как у вас получилось...
не совсем понял про скроллинг - получается он у нас отсутствует и не будет работать если все div'ы скрыты?