1

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

我的开发页面在这里。

锚点和标签的代码是：

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

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

4

3 回答 3

1

您可能会发现scrollIntoView很有用。

使用有几个问题scrollIntoView：

  • 它将所选元素一直滚动到屏幕顶部。如果所选元素上方有一点空间，而不是将其一直推到窗口顶部，看起来会更好。您可以通过结合 scrollBy 来解决这个scrollIntoView问题，它可以滚动一个相对量。
  • 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. 但是，较长的部分会将选项卡面板滚动到顶部。这种行为上的差异看起来不太好。

您可以使用以下内容在当前选项卡面板上实现 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);
于 2012-05-30T02:27:30.757 回答
0

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

单击按钮时，窗口将滚动到选项卡

于 2012-05-30T01:39:45.680 回答
0 
$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

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

$(".TabbedPanelsTabGroup li").each(function(){
   $(this).click(function(){
     $('html, body').animate({
      scrollTop: $(this).offset().top
     }, 1000);
   });
 });
于 2012-05-30T02:20:03.440 回答