Прокрутите до тега привязки, когда выбрана вкладка панели

Вы можете найти полезным scrollIntoView.

Есть несколько проблем с использованием scrollIntoView:

• Он прокручивает выбранный элемент до самого верха экрана. Выглядит лучше, если над выбранным элементом есть небольшое пространство, а не до самого верха окна. Вы можете решить эту проблему, комбинируя scrollIntoView с scrollBy, которые могут прокручиваться на относительную величину.
• На вашем конкретном сайте некоторые разделы с вкладками довольно короткие, поэтому, например, при выборе раздела Обзор — короткого — нет места для прокрутки панели вкладок в верхнюю часть экрана. , в зависимости от размера окна. Однако более длинные разделы будут прокручивать панель вкладок вверх. Эта разница в поведении выглядит не очень хорошо.

Вы можете реализовать scrollTo на текущей панели вкладок, используя что-то вроде этого:

<ul class="TabbedPanelsTabGroup">
    <li id="tabHeaderOverview" class="TabbedPanelsTab" tabindex="0" onclick="document.getElementById('tabHeaderOverview').scrollIntoView()">Overview</li>
    <li id="tabHeaderActivity" class="TabbedPanelsTab" tabindex="0" onclick="document.getElementById('tabHeaderActivity').scrollIntoView()">Activity Weeks</li>
    <li id="tabHeaderExpeditions" class="TabbedPanelsTab" tabindex="0" onclick="document.getElementById('tabHeaderExpeditions').scrollIntoView()">Expeditions</li>
    <li id="tabHeaderTestimonials" class="TabbedPanelsTab TabbedPanelsTabSelected" tabindex="0" onclick="document.getElementById('tabHeaderTestimonials').scrollIntoView()">Testimonials</li>
</ul>

Ваш вопрос помечен как jquery, но, похоже, вы его не используете. jquery предоставляет гораздо более мощный набор процедур прокрутки, см. эту демонстрационную страницу jquery.

Изменить: похоже, что у Spry есть проблема с подходом, описанным выше: добавление события onclick к элементам списка нарушает работу панели вкладок Spry. У меня небольшой опыт работы со Spry, но это Spry.Utils метод выглядит так, как будто он может быть частью решения Spry -

Вам нужно будет включить SpryUtils на свою страницу, затем вам нужно будет добавить javascript примерно так: извините, но я не могу попробовать это на своем компьютере, так что это не проверено:

function scrollTabHeader(event)
{
    this.scrollIntoView();
    // this incorporates the scrollBy mentioned above:    
    window.scrollBy(0, -10);
}

Spry.Utils.addEventListener("tabHeaderOverview", "click", scrollTabHeader, false);
Spry.Utils.addEventListener("tabHeaderActivity", "click", scrollTabHeader, false);
Spry.Utils.addEventListener("tabHeaderExpeditions", "click", scrollTabHeader, false);
Spry.Utils.addEventListener("tabHeaderTestimonials", "click", scrollTabHeader, false);

вы можете добавить href="#change", например, к вашей ссылке

<a href="#change" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Why World Challenge','','images/intl_nav_over_05.jpg',1)" href="#change"><img width="134" height="40" border="0" src="http://www.worldchallenge-internationalschools.com/dev/images/intl_nav_05.jpg" alt="Why World Challenge" id="Why World Challenge"></a>

и идентификатор вкладки

<li class="TabbedPanelsTab" tabindex="0" id="change">Why World Challenge</li>

при нажатии на кнопку окно перейдет на вкладку

$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

Это будет плавно прокручиваться до вашего элемента, вы можете изменить скорость, с которой вы можете обрабатывать группу в одной функции.

$(".TabbedPanelsTabGroup li").each(function(){
   $(this).click(function(){
     $('html, body').animate({
      scrollTop: $(this).offset().top
     }, 1000);
   });
 });