jquery - 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不会是导致动画失败的数字。

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

演示

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