javascript - 无法让 JSFiddle 工作

Question

我将下面的代码添加到我的JSFiddle的顶部并且它停止了工作，我认为这是一个简单的修复，但我无法弄清楚：

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

// assign the correct target
var target = $('#if_two');

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function(){
    target.css({'border-color': 'red'})
});

我究竟做错了什么？

Answer 1

问题只是代码的顺序。当代码被评估时，它实际上更像这样

var target;

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

// assign the correct target
target = $('#if_two');

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function(){
    target.css({'border-color': 'red'})
});

这个过程称为变量提升。所以当

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

执行，target仍然未定义。如果您按以下方式订购代码，它就可以工作。

// assign the correct target
var target = $('#if_two');

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function(){
    target.css({'border-color': 'red'})
});

这里的小提琴：http: //jsfiddle.net/TomLee/TwtD9/5/

Answer 2

您在定义之前使用目标。有关工作示例，请参见此处：http: //jsfiddle.net/TwtD9/4/

// assign the correct target
var target = $('#if_two');

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function(){
    target.css({'border-color': 'red'})
});

Answer 3

所有的评论者和答案当然是对的，但是你知道开发者控制台（大多数浏览器中的 f12）吗？因为如果您打开该控制台，您将看到错误，如前所述：

'Uncaught TypeError: Cannot call method 'offset' of undefined'