Scroll to an anchor tag when panel tab selected

Question

Is there a way to scroll to an anchor on a page when a tab on a tabbed panel is selected? I would like the tabbed panel to scroll to the top of the browser window.

My development page is here.

The code for the anchor and tabs is:

<h1 class="heading">
    <a name="heading" id="heading"></a>Asia &amp; South East Asia International Schools
</h1>
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Overview</li>
        <li class="TabbedPanelsTab" tabindex="0">Activity Weeks</li>
        <li class="TabbedPanelsTab" tabindex="0">Expeditions</li>
        <li class="TabbedPanelsTab" tabindex="0">Testimonials</li>
    </ul>

</div>

Any help would be greatly appreciated. Cheers

Answer 1

You might find scrollIntoView useful.

There are a couple of problems with using scrollIntoView:

• It scrolls the selected element all the way to the top of the screen. It looks better if there's a little space above the selected element, rather than having it pushed all the way to the top of the window. You can address this by combining scrollIntoView with scrollBy, which can scroll by a relative amount.
• On your particular site some of the tabbed sections are pretty short, so, for instance, when selecting the Overview section - a short one - there's no room to scroll the tab-panel to the top of the screen, depending on the window size. However, longer sections will scroll the tab-panel to the top. This difference in behavior doesn't look good.

You can implement scrollTo on your current tab-panel using something like this:

<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>

Your question is tagged jquery but you don't appear to be using it. jquery provides a much more powerful set of scrolling routines, see this jquery demo page.

Edit: It looks like Spry has a problem with the approach above: adding an onclick event to the list elements is breaking the Spry tab-panel. I only have marginal experience with Spry, but this Spry.Utils method looks like it might be part of a Spry solution -

You'll need to include SpryUtils in your page, then you'd need to add javascript something like the following - sorry, but I can't try this on my machine, so this is untested:

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);

Answer 2

you can add a href="#change" for example to your link

<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>

and an id to the tab

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

when the button is clicked the window will scroll to the tab

Answer 3

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

This will scroll smoothly to your element you can change the speed you can handle the group all in one function.

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