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代码，可以重新使用

回答

相关问题