`return this` 的 JavaScript 函数的行为问题

Question

我在 Rails 4.1.1 上使用 Ruby，在我的 application.js 文件中，我有以下启用页面滚动的代码：

(function($) {
  $.fn.scrollTo = function() {
    $('html, body').animate({
      scrollTop: $(this).offset().top + 'px'
    }, 'fast');
    return this; // for chaining...
  }
})( jQuery );

我可以在我的 js 回复中使用上述功能，如下所示：

$('#target_id').scrollTo();

# other JS code...

它在大多数情况下都有效，但在以下情况下除外：假设我 运行 函数在 js 响应中 #target_id 是 not 在 js 请求被触发的页面上找到，然后 other JS code... 不 运行。我的结论是 scrollTo() 函数破坏了一些东西，因为如果我删除它，一切都会起作用。

为什么会这样？有什么问题，我该如何解决？

Answer 1

检查选择器是否找到了一些结果。例如使用 if (!$(this).length) return;（或在访问 .offset() 方法之前使用其他验证）。

(function($) {
  $.fn.scrollTo = function() {
    if (!$(this).length) return;
    $('html, body').animate({
      scrollTop: $(this).offset().top + 'px'
    }, 'fast');
    return this; // for chaining...
  }
})( jQuery );

---

或者用try{}catch(){}

包裹一切

(function($) {
  $.fn.scrollTo = function() {
    try {
        $('html, body').animate({
          scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
    catch(err) {}
  }
})( jQuery );