Javascript jQuery滚动方法的推广

我试图概括一个滚动功能，我用它滚动到项目的不同部分。目前一切正常，但我使用了大量重复代码，我想看看是否有任何方法可以使jQuery方法更具动态性，这样我就可以只使用一个方法，而不是使用固定的方法

header.php：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">

    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
      <li id="about-scroll"><a href="#">Profile</a></li>  
      <li id="proj-scroll"><a href="#">Projects</a></li>  
      <li id="work-scroll"><a href="#">Work</a><li>
      <li id="abilities-scroll"><a href="#">Abilities</a><li>
      <li id="contact-scroll"><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>

正如你所看到的，我使用了5次基本相同的代码，当我真的想优化它，只使用一个函数。这段代码和结构工作得很好，但我想优化一下，这样我就不会多次使用同一段代码了

---

是否有一种方法可以使我的类/ID结构化，从而使其更通用。我对设计/javascript比较陌生。目前，我的结构有点混乱，我想我可能必须更改我的类或id名称，以便将它们用作方法中的可通过变量？

我将使用两个步骤简化此过程

第一步。将公共代码移到函数中 第二步。不是将函数逐个分配给每个控件，而是基于某个属性进行分配 不要按名称引用控件，而是为每个控件指定一个伪样式，例如可滚动，并使用一条jquery语句指定：

HTML:

纯粹主义者可能更喜欢使用数据属性而不是样式类。

这应该行得通

根据你的代码，我瞄准了容器。然后，如果单击了任何列表项，我将获取元素id并将其分配给变量。然后，当该变量与某个区域匹配时，我通过switch语句运行该变量，然后分配一个类，并将该类传递给运行jQuery滚动动画的函数

   $('.container-fluid li').click( function(){
       var getClicked = $(this).attr(id);
       switch (getClicked){
           case 'about-scroll':
               var setlocal = 'about';
               scrollAni(setlocal);
               break;
           case 'proj-scroll':
               var setlocal = 'projects';
               scrollAni(setlocal);
               break;
           case 'work-scroll':
               var setlocal = 'work';
               scrollAni(setlocal);
               break;
           case 'abilities-scroll':
               var setlocal = 'skills';
               scrollAni(setlocal);
               break;
           case 'contact-scroll':
               var setlocal = 'contact';
               scrollAni(setlocal);
               break;
       }
   }

这是我设置用来执行jQuery滚动的函数。我们使用local作为函数占位符来传递类的名称

function scrollAni(local){
    $('html, body').animate({
        scrollTop: $('.'+local+'').offset().top;
    }, 2000);
}

---

为它们使用公共类…您可以通过在html中用一个空格分隔来使用多个类。使用公共类不会每次都让导航移动到同一个部分吗？如果不同的部分都有相同的类，它将如何区分它们@BhojendraNepalI的意思是在点击处理程序中使用公共类，而不是在它的…类功能滚动框中…应该用公共类替换…所以我尝试实现这个，但它不起作用。如何在这里检索节类？它似乎不知道应该去哪个节类，我还建议给UL一个id，这样您就可以更好地定义jQuery选择器的范围。如果在该分区中添加更多UL元素，请将重点更多地放在目标区域，这样事情就不会完全失控。

var scrollHandler = function() {
   $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 2000);
}
$('#about-scroll').click(scrollHandler);
$('#proj-scroll').click(scrollHandler);
$('#contact-scroll').click(scrollHandler);
$('#work-scroll').click(scrollHandler);
$('#abilities-scroll').click(scrollHandler); 

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
    </div>
    <div>
      <ul class="nav navbar-nav navbar-right">
      <li id="about-scroll" class="scrollable"><a href="#">Profile</a></li>  
      <li id="proj-scroll" class="scrollable"><a href="#">Projects</a></li>  
      <li id="work-scroll" class="scrollable"><a href="#">Work</a><li>
      <li id="abilities-scroll" class="scrollable"><a href="#">Abilities</a><li>
      <li id="contact-scroll" class="scrollable"><a href="#">Contact</a></li> 
      </ul>
    </div>
  </div>
</nav>

$('.scrollable').click(scrollHandler); 

   $('.container-fluid li').click( function(){
       var getClicked = $(this).attr(id);
       switch (getClicked){
           case 'about-scroll':
               var setlocal = 'about';
               scrollAni(setlocal);
               break;
           case 'proj-scroll':
               var setlocal = 'projects';
               scrollAni(setlocal);
               break;
           case 'work-scroll':
               var setlocal = 'work';
               scrollAni(setlocal);
               break;
           case 'abilities-scroll':
               var setlocal = 'skills';
               scrollAni(setlocal);
               break;
           case 'contact-scroll':
               var setlocal = 'contact';
               scrollAni(setlocal);
               break;
       }
   }

function scrollAni(local){
    $('html, body').animate({
        scrollTop: $('.'+local+'').offset().top;
    }, 2000);
}