查询动画滚动顶部在我的弹性框两列布局中不起作用

Question

我已经使用弹性框构建了一个两列站点，用于具有两列布局的布局。 当我刷新站点时，我想使用 animate 和 scrollTop 将 animation 添加到我的本地链接中。 本地链接在没有 javascript 的情况下可以正常工作，但在 function 的情况下则不行。 我怀疑它与布局有关，但无法弄清楚我做错了什么。 我已经建立了一个小提琴来展示我的问题。

我的链接在左栏，内容在右栏。 我正在使用这个 function 来做我的动画滚动

$('.scroll-to').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    console.log('clicked on #' + href);
    $('.main-content').animate({
        scrollTop: $(href).offset().top - 10
    }, 'slow');
    return false;
});

jsfiddle

我感觉我很接近了，但我花了几个小时试图 go 这最后几英尺。 任何帮助表示赞赏。