Question

我试图让div类在点击.recipeImgs li时滚动到顶部。我尝试了下面的代码，但我收到了error消息

Uncaught TypeError: Cannot read property 'top' of undefined". Not sure how to fix the issue

谢谢

$('.recipeImgs li').on('click',function (e) {
      e.preventDefault();
      console.log("clicked");
      var target = this.hash,
      $target = $(target);

      $('html, body').stop().animate({
          'scrollTop': $target.offset().top-50
      }, 900, 'swing', function () {
          window.location.hash = target;
     });
});

Answer 1

正如有人在其中一条评论中指出的那样，问题是$target没有元素，这意味着.offset()方法返回undefined。显然top上没有属性undefined，因此错误。

你可能会重新考虑写这样的函数：

$(document).on('click', '.recipeImgs li', function(evt){
  evt.preventDefault();

  var $target = $(this);

  if(!$target.length) return;

  $('html, body')
    .stop()
    .animate({
      'scrollTop': $target.offset().top - 50
    }, 900, 'swing', function(){
      window.location.hash = '[target]';
    })
});

这解决了一些问题。首先，它将监听器委托给document，因此，如果动态追加li，您仍然可以抓住该事件（因为它会冒泡DOM）。还有$target.length的支票。这只是确保您不会尝试检索空集合的偏移量，从而导致错误并破坏您的代码。

控制台错误：未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

1 个答案: