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 & 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
You might find scrollIntoView useful.
There are a couple of problems with using
scrollIntoView
:scrollIntoView
with scrollBy, which can scroll by a relative amount.You can implement scrollTo on your current tab-panel using something like this:
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: