Question

我正在尝试制作一个简单的菜单，每个li标签，当点击时使用scrollTop进行导航。

<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
    });
});

问题是我有几个部分需要使用相同的逻辑但应用于不同的部分，所以主要是我不想为每个部分编写单独的代码，而是应用于每个菜单的代码可以解决这个问题为了我。我知道要问很多，但我对此很新。

Answer 1

在每个class元素上使用通用<li>。我看到你现在有课，但它们是独一无二的，这些应该是ID的。他们可以分享的一个常见类是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>

ScrollTo可以重用的jQuery代码

1 个答案: