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

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

您可能会发现scrollIntoView有用。

有几个问题与使用scrollIntoView：

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

可以使用这样的事情你当前标签面板上实现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.Utils方法看起来可能是一个轻快解决方案的一部分 -

您需要在您的网页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 2

可以当按钮被点击窗口将滚动到你的链接

<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例如添加A HREF =“＃变”的标签

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

到标签

Answer 3

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

这将顺利滚动到您可以更改您的元素e速度，您可以在一个功能中处理所有组。

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