Animate按预期停止滚动。任何线索？

Question

这是小提琴：http://jsfiddle.net/talofo/5YgY5/19/

查看问题的步骤：

1. 点击“ble ble”菜单项
2. 点击黄色部分
3. 点击“bla bla”菜单项
4. 再次点击“ble ble”菜单项。

您会注意到4）步骤不起作用，我们也不会回滚到该项目，因为我相信我们已经更改了ID。

var $root = $('html, body');

$('.main-menu a').click(function() {
 $root.animate({
   scrollTop: $($(this).attr('href')).offset().top+1
  }, 2000
 );
 return false;
});

我试图改变这段代码，但是我无处可去，所以我最终放弃发布垃圾，只留下问题代码。

有人可以就如何解决这种行为提出建议吗？

Answer 1

您正在根据点击元素的ID检查元素的偏移量。因此，如果您更改该ID，则下次单击时，查询$($(this).attr('href'))将失败（它不再匹配任何内容）。因此.offset().top不会是导致动画失败的数字。

要解决此问题，请在点击侦听器之外获取偏移量，这样您就不会在点击时查询，并且将来的点击次数只会与原始偏移量相关联。

DEMO

  var $root = $('html, body');
  $('.main-menu a').each(function(){
      // capture the offset on init not click
      var that   = $(this),
          offset = $(that.attr('href')).offset().top+1;
      // then use that offset, so we are not querying for id on each click
      that.click(function() {
         $root.animate({
           scrollTop: offset
         }, 2000);
      });      
  });