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'

无法让JSFiddle工作

3 个答案: