控制台错误：未捕获TypeError：无法读取未定义的属性“顶部”

Question

I'm trying to get a div class to scroll to the top when .recipeImgs li is clicked. I tried the code below but i am getting the error message

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

Thanks

$('.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

The issue, as someone pointed out in one of the comments, is that $target has no element, which means that the .offset() method returns undefined . Obviously there is no property top on undefined , hence the error.

You might reconsider writing your function something like this:

$(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]';
    })
});

This fixes several things. First of all, it delegates the listener to the document , so if your li is dynamically appended, you'll still be able to grab the event (as it bubbles up the DOM). There's also a check for $target.length . This just ensures that you don't try to retrieve the offset of an empty collection, resulting in an error and breaking your code.