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で、これに対処できます。
  • 特定のサイトでは、タブ付きセクションの一部がかなり短いため、たとえば概要セクション (短いセクション) を選択すると、ウィンドウ サイズによっては、タブ パネルを画面の上部までスクロールする余地がありません。ただし、セクションが長くなると、タブ パネルが一番上にスクロールされます。この動作の違いは見栄えがよくありません。

次のようなものを使用して、現在のタブパネルに 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);

これにより、要素にスムーズにスクロールし、グループをすべて 1 つの関数で処理できる速度を変更できます。

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