ScrollTo jQuery代碼，可以重新使用

我試圖做一個簡單的菜單，每個li標籤，點擊時使用scrollTop導航。ScrollTo jQuery代碼，可以重新使用

<div class="menu" id="menu1"> 
    <ul> 
    <li class="button1">Section1</li> 
    <li class="button2">Section2</li> 
    <li class="button3">Section3</li> 
    <li class="button4">Section4</li> 
    <li class="button5">Section5</li> 
    </ul> 
</div> 

$(".button1").click(function() { 

    $('html, body').animate({ 
     scrollTop: $('.section1').offset().top-55 
    }); 
});

的事情是我有需要使用相同的邏輯，但適用於不同的部分幾個部分，所以主要是我不想寫一個單獨的代碼爲每一個，而其應用到每個代碼菜單可以爲我解決這個問題。我知道要問很多，但我對此很新穎。

來源

2013-07-02 Juan Felipe Gómez

在每個<li>元素上使用共同的class。我看到你現在有班，但是他們是獨一無二的，這些應該可能是身份證。他們可以共享，例如常見的類是menuButton，那麼你的功能可能是：

$(".menuButton").click(function() { 
    //var elementID = this.id <--Optional variable containing the clicked element ID 

    //Sample logic 
    //if (elementID == "button1") { animate this way }) 
    $('html, body').animate({ 
     scrollTop: $('.section1').offset().top-55 
    }); 
});

修改HTML：

<div class="menu" id="menu1"> 
    <ul> 
     <li id="button1" class="menuButton">Section1</li> 
     <li id="button2" class="menuButton">Section2</li> 
     <li id="button3" class="menuButton">Section3</li> 
     <li id="button4" class="menuButton">Section4</li> 
     <li id="button5" class="menuButton">Section5</li> 
    </ul> 
</div>

來源

2013-07-02 22:39:03 tymeJV

呀，事情是，我仍然需要做的唯一ID的每一個菜單。這正是問題所在。我在一節中有很多菜單，所以對於menu1來說很好，但對於menu2，我必須使用button1_2，併爲每個按鈕添加另一行代碼。 –

我有嚴重的問題閱讀。我通過評論的話得到你所說的話。我會嘗試一下，看看它是否有效。謝謝！ –

這幫助我組織了一下，但仍然需要一些我無法解決的工作。事情是這對一個部分和一個菜單很好。但是我有很多部分，在同一頁面上有很多菜單，每個部分在提示時隱藏和取消隱藏。 –

ScrollTo jQuery代碼，可以重新使用

回答

相關問題