选择面板选项卡时滚动到锚标记

Question

选择选项卡式面板上的选项卡时，是否可以滚动到页面上的锚点？我希望选项卡式面板滚动到浏览器窗口的顶部。

我的开发页面是here.

锚点和标签的代码是：

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

任何帮助将不胜感激。 干杯

Answer 1

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

这将平滑滚动到您的元素，您可以在一个功能中更改处理组的速度。

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

Answer 2

您可能会发现scrollIntoView 很有用。

使用scrollIntoView有几个问题：

• 它将所选元素一直滚动到屏幕顶部。如果所选元素上方有一点空间，而不是将其一直推到窗口顶部，看起来会更好。您可以通过将scrollIntoView 与scrollBy 结合使用来解决此问题，后者可以相对滚动。
• 在您的特定站点上，一些选项卡片部分非常短，因此，例如，在选择概述 em>部分时 - 一个简短的 - 没有空间滚动到顶部屏幕大小，取决于窗口大小。但是，较长的部分会将标签面板滚动到顶部。这种行为差异看起来不太好。

您可以使用以下方式在当前的选项卡面板上实现 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 提供了一组更强大的滚动例程，请参阅this jquery demo page。

编辑： 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);

Answer 3

您可以在链接中添加例如 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>

和标签的ID

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

当按钮被点击时，窗口将滚动到标签页