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

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

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

Answer 2

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

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

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

Answer 3

您可能会发现scrollIntoView有用。

使用scrollIntoView时存在一些问题：

它将所选元素一直滚动到屏幕顶部。如果在所选元素上方有一点空间，而不是将其一直推到窗口顶部，则看起来更好。您可以将scrollIntoView与scrollBy相结合来解决此问题，this jquery demo page可以滚动相对金额。
在您的特定网站上，某些标签部分非常短，因此，例如，在选择概述部分（一个较短的部分）时，没有空间将标签面板滚动到顶部屏幕的大小，取决于窗口大小。但是，较长的部分会将标签面板滚动到顶部。这种行为差异看起来不太好。

您可以使用以下内容在当前标签面板上实现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提供了一组功能更强大的滚动例程，请参阅Spry.Utils。

编辑：看起来Spry上述方法存在问题：向列表元素添加onclick事件会破坏Spry选项卡面板。我只有Spry的边缘经验，但这个{{3}}方法看起来可能是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);

选中面板选项卡后滚动到锚标记

3 个答案: