JQuery滚动 - 停止前一个＆amp;概括

Question

我有这样的代码：

的JavaScript

$( document ).ready(function() {
  $("a.link1").click(function (){
        //$(this).stop().preventDefault().animate(function(){
            $('html, body').animate({
                scrollTop: $("#link1").offset().top
            }, 2000);
        //});
  });

  $("a.link2").click(function (){
        //$(this).stop().preventDefault().animate(function(){
            $('html, body').animate({
                scrollTop: $("#link2").offset().top
            }, 2000);
        //});
  });

  $("a.link3").click(function (){
        //$(this).stop().preventDefault().animate(function(){
            $('html, body').animate({
                scrollTop: $("#link3").offset().top
            }, 2000);
        //});
  });
});

HTML正文：

<div id="menu">
  <a href='#link1' class="link1">LINK 1</a>
  <a href='#link2' class="link2">LINK 2</a>
  <a href='#link3' class="link3">LINK 3</a>
</div>
<div id="content">
  <a name="link1" id="link1"></a>
  <!--some text-->
  <a name="link2" id="link2"></a>
  <!--some text-->
  <a name="link3" id="link3"></a>
  <!--some text-->
</div>

请帮助我：

1. 停止似乎不像我想要的那样工作。我希望以某种方式停止以前滚动时激活另一个链接。
2. 有没有任何方法可以推广jQuery部分。我有超过3个菜单链接，我不想为每个菜单链接创建一个特殊功能。

非常感谢你的帮助。 五味

Answer 1

您可以通过将单击回调提取到常用函数来进行概括：

var linkClickCallback = function(selector){
        $('html, body').stop().animate({
            scrollTop: $(selector).offset().top
        }, 2000);
}

$( document ).ready(function() {
   $("a.link1").click(linkClickCallback.bind(null, '#link1'));
   $("a.link2").click(linkClickCallback.bind(null, '#link2'));
   $("a.link3").click(linkClickCallback.bind(null, '#link3'));
});

请注意，在linkClickCallback中我也写了正确使用stop（）方法。

修改

这适用于菜单中的所有项目：

$( document ).ready(function() {
   $("#menu a").click(function(e){
        e.preventDefault();
        linkClickCallback('#' + this.className);
   });
});

使用相同的linkClickCallback函数。

Answer 2

是的，只是概括一个这样的函数，然后在函数内部寻找调用者（this）：

$("#menu a").click(function(e){
    var t = $(this)
    $('html, body').animate({
          scrollTop: t.offset().top
    }, 2000);
});